サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する
Colorboxの使い方[Colorbox 1.6.3- 2015/07/27 最新バージョン]
Colorboxは、jQuery系の画像表示のJavascriptです。画像以外に、YouTube, Vimeo, ajax, inline, iframeなどのコンテンツを対応しています。
Colorboxの最新バージョンは、Colorbox 1.6.3- 2015/07/27です。ライセンスは、MIT(フリー)です。Colorbox (c)Jack Moore

Colorbox サンプルデモ(Demonstration no.5)

Colorbox1.6.3には、5つのパターンのサンプルファイル(exsample1-5)が同梱されています。
ここでは、exsample5を使用して説明しています。exsample5の画像イメージは下の画像のとおりです。
exsample5は、previous/nextボタンおよび画像枚数表示が左下、タイトルが下中央、クローズボタンが右下に表示されます。
 
他のexsampleを見る > exsample1exsample2exsample3exsample4exsample5

 画像 2枚の個別(縦サイズ固定 100%)(デモ番号:ex1 以下同様)

 画像 グループ1 しなやかに遷移(ex2)

 画像 グループ2 フェードで遷移(ex3)

 画像 グループ3 遷移なし + 横、縦サイズを固定 (PCスクリーン画面の75%に収めて表示)(ex4)

 画像 グループ4 スライドショー(縦サイズを固定 100%)(ex5)

 その他のコンテンツ(Retina Imagesは省略します)

外部HTML (Ajax)(ex6)

フラッシュ / 動画 (SWFファイル)(ex7)

フラッシュ / 動画1 (Iframe/Direct Link To YouTube)(ex8)

フラッシュ / 動画 (Iframe/Direct Link To Vimeo)(ex9)

外部ウェブサイト (Iframe)(ex10)

インラインHTML (Inline)(ex11)


Colorbox 使用方法

 Colorboxのダウンロード

Colorboxサイトからcolorbox-master.zipをダウンロードし、解凍後次のようにファイルを配置します。
ダウンロードしたColorboxファイルには、画像などコンテンツ表示の仕方が異なる5つのバリエーション
が用意されています(example1~5フォルダ内のCSSファイルおよびボタン画像群)。
い、ColorboxコンテンツのHTMLを作成する場合5つのCSSファイルから、好みのバリエーション対応のCSSを選びます【重要】

本ページのcolorboxのフォルダ/ファイル構成例

■ colorbox
│  
├─■ content  ←[表示する画像などコンテンツ用のフォルダ
│  ├─■ fall
│  ├─■ swf
│  ├─□ ajax.html
│  ├─□ ・・・
│   
│  └─□ ・・・
│      
├─■ img  ←[本ページが使用する説明用の画像フォルダ
├─■ js-ex5  
│  │
│  ├─■ images   ←[example5フォルダ内のimagesフォルダを使用
│  │  ├─□ border.png  
│  │  ├─□ controls.png  
│  │  ├─□ loading.gif  
│  │  └─□ loading_background.png  
│  ├─□ colorbox.css    ←[example5フォルダ内のCSSファイルを使用
│  ├─□ jquery.colorbox.js  
│  ├─□ jquery.colorbox-min.js  
│  └─□ jquery.colorbox-ja.js  日本語化JSファイル  
│          
└─□ photo-colorbox.html

(注1)■:フォルダ □:ファイル
(注2):必須ファイル。
    その他の必須ファイルに、GoogleやMicrosoftのCDNのjQueryファイルを
    読み込んで使用する必要があります。
    例;Google Ajax API CDNのjQueryファイルURL
    https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
(注3)青字ファイルは、colorbox提供ファイル
(注4)フォルダ名は任意ですが、js-ex5配下のimagesは、colorbox.cssが
    参照しているので注意が必要です。
(注4)日本語化JSファイルは、i18nフォルダにあります。

colorbox-master.zip解凍後のフォルダ/ファイル構成

■ colorbox-master
│  
├─■ content
│  ├─□ ajax.html
│  ├─□ daisy.jpg
│  ├─□ daisy@2x.jpg
│  ├─□ homer.jpg
│  ├─□ marylou.jpg
│  ├─□ ohoopee1.jpg
│  ├─□ ohoopee2.jpg
│  └─□ ohoopee3.jpg
│      
├─■ example1
├─■ example2
├─■ example3
├─■ example4
├─■ example5
│  ├─□ colorbox.css
│  ├─□ index.html
│  │  
│  └─■ images
│      ├─□ border.png
│      ├─□ controls.png
│      ├─□ loading.gif
│      └─□ loading_background.png
│          
├─■ i18n
├─□ bower.json
├─□ colorbox.ai
├─□ jquery.colorbox-min.js
├─□ jquery.colorbox.js
├─□ package.json
└─□ README.md

■:フォルダ □:ファイル

 HTMLの準備

1.colorboxのCSSファイルをインクルードするタグを、HEADタグ内に書きます。CSSファイルのパスは、置いた場所により適宜変更します。

<link rel="stylesheet" href="js-ex5/colorbox.css" type="text/css" />
                    
2.colorboxのJSファイルおよびjqueryファイルをインクルードするタグを、HEADタグ内に書きます。JSファイルのパスは、置いた場所により適宜変更します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- 必須。 -->
<script type="text/javascript" src="js-ex5/jquery.colorbox-min.js"></script> <!--  必須。  または jquery.colorbox.jsを使用。 -->
<script type="text/javascript" src="js-ex5/jquery.colorbox-ja.js"></script> <!-- オプション。 日本語化JSファイル 必要の場合使用 -->
                 
※日本語化JSファイルは、つぎの項目について日本語にカスタマイズできます
  • 画像グループ全体の枚数と現在の何枚目の表示(プロパティ名:current) グループ
  • previousボタン(previous)/nextボタン(next)/closeボタン(close) グループ(example4のCSS使用時)
  • startボタン(slideshowStart)/stopボタン(slideshowStop) スライドショー(example4のCSS使用時)
  • 画像のロードに失敗した場合のエラーメッセージ(xhrError/imgError)

 colorboxコンテンツの設定

一般形式(jQuery設定およびAタグ)

<!-- jQuery(colorboxのJSファイル定義の下に記述します) -->
<script>
 $(document).ready(function(){

 $(selector).colorbox({key:value, key:value, key:value}); //selectorはクラスセレクター 例:"a.クラス名")

		            });
</script>

<!-- Aタグ(jQuery設定のselectorのクラス名と関連付ける)-->
<a class="クラス名" href="画像ファイルなどcolorboxコンテンツのURL" title="コンテンツのタイトル">xxxxx</a>
                 
設定例まとめ~初めに、いろいろなjQuery設定例およびAタグ設定1例を示します

<script type="text/javascript" src="js-ex5/jquery.colorbox-min.js"></script> <!--colorbox JSファイル -->
<!-- jQuery設定スクリプト(いろいろなColorboxコンテンツの設定例を示しています) -->  
<script>
  $(document).ready(function(){
        //Examples of how to assign the Colorbox event to elements
	$(".exdemo").colorbox({rel:'exdemo', height: "95%"});
	$(".single").colorbox({height: "95%"});  //デモ番号ex1
	$(".single2").colorbox({});
	$(".group1").colorbox({rel:'group1'});  //デモ番号ex2
	$(".group2").colorbox({rel:'group2', transition:"fade"});  //デモ番号ex3
	$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});  //デモ番号ex4
	$(".group4").colorbox({rel:'group4', slideshow:true ,width:"", height:"100%"});  //デモ番号ex5
	$(".ajax").colorbox();  //デモ番号ex6
	$(".swf").colorbox({iframe:true, innerWidth:400, innerHeight:280});  //デモ番号ex7
	$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});  //デモ番号ex8
	$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});  //デモ番号ex9
	$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});  //デモ番号ex10
	$(".inline").colorbox({inline:true, width:"50%"});  //デモ番号ex11
	$('.non-retina').colorbox({rel:'group5', transition:'none'})
	$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
    });
  jQuery.extend(jQuery.colorbox.settings, {     // 国際化
	current: "{current}枚目/{total}枚中"   // n 枚目/N 枚中 にカスタマイズ 画像枚数表示の日本語化 デフォルトは n of N
        });                                     //
</script>
</head>
<body>
<!-- Aタグ設定1例 デモ番号ex4 複数枚画像グループの例 -->
	<a class="group3" href="content/girl1.jpg" title="女優1"><img src="content/girl1.jpg" width=150 height=150></a>
	<a class="group3" href="content/girl3.jpg" title="女優2"><img src="content/girl3.jpg" width=150 height=150></a>
	<a class="group3" href="content/girl2.jpg" title="女優3"><img src="content/girl2.jpg" width=150 height=150></a>

(注)コメントのデモ番号をクリックすると該当のデモを見ることができます。
                 
個別画像の設定例(デモ番号ex1)

<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
	$(".single").colorbox({height: "95%"});
    });
</script>
</head><body>
                 
  • $(".single");Aタグのクラスセレクター。".single"のsingleは、表示したい画像などコンテンツのAタグのクラス名。
    名前は任意。書き方は、".single"または"a.single"。
  • height;外枠とボタンなどを含んだ表示画面の縦の最大のサイズ。書き方は、"95%"、"500px"または600。
    例では、画像表示の縦の最大サイズをウィンドーサイズの95%にしたい。

<!-- Aタグ設定 -->
	<a class="single" href="content/takao-tengu.jpg" title="JR高尾駅ホーム 天狗">
                                 <img src="content/takao-tengu.jpg" width=150 height=150></a>
                 
  • class;Aタグのクラス名。例えば、"single"。対応するjQuery設定のクラスセレクターのクラス名に合わせる。
    名前は任意。
  • href;表示する画像などのコンテンツのURL。例えば、"content/takao-tengu.jpg"。
  • title;表示する画像などのコンテンツのタイトル(キャプション)。例えば、"JR高尾駅ホーム 天狗"。
  • 画像クリックでデモを見ることができます。
画像グループ1~3の設定例(デモ番号ex2,3,4)

<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
	$(".group1").colorbox({rel:'group1'});
	$(".group2").colorbox({rel:'group2', transition:"fade"});
	$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    });
</script>
</head><body>
                 
  • $(".group1")/$(".group2")/$(".group3");Aタグのクラスセレクター。
    例えば、".group1"のgroup1は、表示したい複数の画像などコンテンツのAタグのクラス名。
    ここでは、3つの画像グループの例を示している。
  • rel;同じグループにしたい画像のAタグのクラス名。
    一般には、クラスセレクターとrelの値は同じ名前ー$(".group1").colorbox({rel:'group1'});。
    3枚の画像を1つのグループにしたとき、そのグループの3枚の画像のAタグのクラス名は同じにする。
    $(".group1").colorbox({rel:'group2'}); のように書くと、表示バリエーションの違った画像をグループ化できる。
  • transition;画像切り替え時の移り変わり(遷移)の方法(効果)。elasticまたは省略:伸び縮みように表示 fade:フェードイン/フェードアウト none:効果なし
  • width;表示画面の外枠およびボタンを含む横のサイズ。書き方は、"75%"、"600px" または 600。
  • hight;表示画面の外枠およびボタンを含む縦のサイズ。書き方は、"100%"、"600px" または 600。

<!-- Aタグ設定 -->
 // 画像 グループ1 しなやかに遷移(ex2)
    <a class="group1" href="content/girl1.jpg" title="女優1"><img src="content/girl1.jpg" width=150 height=150></a>
    <a class="group1" href="content/girl3.jpg" title="女優2"><img src="content/girl3.jpg" width=150 height=150></a>
    <a class="group1" href="content/girl2.jpg" title="女優3"><img src="content/girl2.jpg" width=150 height=150></a>
 // 画像 グループ2 フェードで遷移(ex3)
    <p>
    <a class="group2"  href="content/fall/1 flowers-garden-varigated Alana w600.jpg" title="秋の風景 ダリア"><img src="content/fall/1 flowers-garden-varigated Alana w600.jpg" width=100 height=100></a>
    <a class="group2"  href="content/fall/2 autumn-fall-leaves Alana w1024.jpg" title="秋の風景 森の湖1"><img src="content/fall/2 autumn-fall-leaves Alana w1024.jpg" width=100 height=100></a></a>
    <a class="group2"  href="content/fall/3 lake-water-trees Alana w600.jpg" title="秋の風景 森の湖2"><img src="content/fall/3 lake-water-trees Alana w600.jpg" width=100 height=100></a></a>
    <a class="group2"  href="content/fall/4 girls-friends-holding Alana w1024.jpg" title="草原の二人の少女"><img src="content/fall/4 girls-friends-holding Alana w1024.jpg" width=100 height=100></a></a>
    <a class="group2"  href="content/fall/5 pregnant-mom-mother by Alana h800.jpg" title="妊婦と子供"><img src="content/fall/5 pregnant-mom-mother by Alana h800.jpg" width=100 height=100></a></a>
    <a class="group2"  href="content/fall/6 berries-plants-bushes Alana w1024.jpg" title="秋の風景 メギノ木"><img src="content/fall/6 berries-plants-bushes Alana w1024.jpg" width=100 height=100></a></a>
    <a class="group2"  href="content/fall/7 afternoon-saturday-green Alana w600.jpg" title="ミツバチ"><img src="content/fall/7 afternoon-saturday-green Alana w600.jpg" width=100 height=100></a></a>
 // 画像 グループ3 遷移なし + 横、縦サイズを固定 (PCスクリーン画面の75%に収めて表示)(ex4)
    <a class="group3" href="content/girl1.jpg" title="女優1"><img src="content/girl1.jpg" width=150 height=150></a>
    <a class="group3" href="content/girl3.jpg" title="女優2"><img src="content/girl3.jpg" width=150 height=150></a>
    <a class="group3" href="content/girl2.jpg" title="女優3"><img src="content/girl2.jpg" width=150 height=150></a>
                 
  • class;Aタグのクラス名。例えば、"group1"。対応するjQuery設定のクラスセレクターのクラス名に合わせる。
    名前は任意。複数のAタグのクラス名を同じにして画像グループを作る。
  • href;表示する画像などのコンテンツのURL。例えば、"content/girl1.jpg"。
  • title;表示する画像などのコンテンツのタイトル(キャプション)。例えば、"女優1"。
  • 画像クリックでデモを見ることができます。上から列順に、グループ1、グループ2、グループ3。


    グループ1(縦横サイズ無指定)


    グループ2(縦横サイズ無指定)


    グループ3(縦横サイズ75%指定)

画像グループ4 スライドショー設定例(デモ番号ex5)

<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
	$(".group4").colorbox({rel:'group4', slideshow:true ,width:"", height:"100%"});
    });
</script>
</head><body>
                 
  • $(".group4");Aタグのクラスセレクター。例えば、".group4"のgroup4は、表示したい複数の画像などコンテンツのAタグのクラス名。
  • rel;同じグループにしたい画像のAタグのクラス名。
    一般には、クラスセレクターとrelの値は同じ名前ー$(".group1").colorbox({rel:'group1'});。
    ここでは、画像グループのスライドショーの例を示している。
    7枚の画像を1つのグループにしたとき、そのグループの7枚の画像のAタグのクラス名は同じにする。
  • slideshow;画像などコンテンツグループの自動スライドショー。
    true:自動スライドショーを行う faiseまたはデフォルト:自動スライドショーをおこなわない。
    スタート時にスライドショーが始まりますが、これを止めたいときは次のプロパティslideshowAutoを指定する。
    slideshowAuto:false(スライドショーはボタンクリックで始まる)。slideshowAutoのデフォルトはtrue。
  • height;外枠とボタンなどを含んだ表示画面の縦の最大のサイズ。書き方は、"95%"、"500px"または600。
    例では、画像表示の縦の最大サイズをウィンドーサイズの100%にしたい。

<!-- Aタグ設定 -->
   <a class="group4"  href="content/fall/1 flowers-garden-varigated Alana w600.jpg" title="秋の風景 ダリア"><img src="content/fall/1 flowers-garden-varigated Alana w600.jpg" width=100 height=100></a>
   <a class="group4"  href="content/fall/2 autumn-fall-leaves Alana w1024.jpg" title="秋の風景 森の湖1"><img src="content/fall/2 autumn-fall-leaves Alana w1024.jpg" width=100 height=100></a>
   <a class="group4"  href="content/fall/3 lake-water-trees Alana w600.jpg" title="秋の風景 森の湖2"><img src="content/fall/3 lake-water-trees Alana w600.jpg" width=100 height=100></a>
   <a class="group4"  href="content/fall/4 girls-friends-holding Alana w1024.jpg" title="草原の二人の少女"><img src="content/fall/4 girls-friends-holding Alana w1024.jpg" width=100 height=100></a>
   <a class="group4"  href="content/fall/5 pregnant-mom-mother by Alana h800.jpg" title="妊婦と子供"><img src="content/fall/5 pregnant-mom-mother by Alana h800.jpg" width=100 height=100></a>
   <a class="group4"  href="content/fall/6 berries-plants-bushes Alana w1024.jpg" title="秋の風景 メギノ木"><img src="content/fall/6 berries-plants-bushes Alana w1024.jpg" width=100 height=100></a>
   <a class="group4"  href="content/fall/7 afternoon-saturday-green Alana w600.jpg" title="ミツバチ"><img src="content/fall/7 afternoon-saturday-green Alana w600.jpg" width=100 height=100></a>
                 
  • class;Aタグのクラス名。例えば、"group4"。対応するjQuery設定のクラスセレクターのクラス名に合わせる。
    名前は任意。複数のAタグのクラス名を同じにして画像グループを作る。
  • href;表示する画像などのコンテンツのURL。例えば、"content/fall/1 flowers-garden-varigated Alana w600.jpg"。
  • title;表示する画像などのコンテンツのタイトル(キャプション)。例えば、"秋の風景 ダリア"。
  • 画像クリックでデモを見ることができます。デモ番号ex5スライドショー。


<!-- スライドショーstart/stopボタンの入れ替え CSSファイル-colorbox.cssの修正 --> 
 55 .cboxSlideshow_off #cboxSlideshow{background-position:-125px 0px; right:27px;}
 56 .cboxSlideshow_off #cboxSlideshow:hover{background-position:-150px 0px;}
 57 .cboxSlideshow_on #cboxSlideshow{background-position:-150px -25px; right:27px;}
 58 .cboxSlideshow_on #cboxSlideshow:hover{background-position:-125px 0px;}
                 
  • 一般的に、動画や音楽などのプレーヤーは、停止中の時は「停止ボタン-stop」、再生中は「開始ボタン-start」が表示されている。
    しかし、Colorboxのスライドショーの場合、表示が反対で、停止中の時は「開始ボタン-start」、再生中は「停止ボタン-stop」が表示される。
    これを、停止中の時は「停止ボタン-stop」、再生中は「開始ボタン-start」が表示されるように修正する(上のコードは修正された状態)。
外部HTML(Ajax) (デモ番号ex6)

<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
	$(".ajax").colorbox();  //プロパティー(コンテンツタイプ)設定なしのときajax
    });
</script>
</head><body>
                 
  • $(".ajax");Aタグのクラスセレクター。".ajax"のajaxは、表示したい画像などコンテンツのAタグのクラス名。
    名前は任意。

<!-- Aタグ設定 -->
	<a class="ajax" href="content/ajax.html" title="外部HTML (Ajax)">外部HTML (Ajax)</a>
                 
  • class;Aタグのクラス名。例えば、"ajax"。対応するjQuery設定のクラスセレクターのクラス名に合わせる。
    名前は任意。
  • ロードできるファイルは、DOCTYPE、METAタグのないテキスト表示タグのみのHTMLファイルです。
  • 画像クリックでデモを見ることができます。
    外部HTML (Ajax)(ex6)content/ajax.html
HTML、YouTube、フラッシュファイルなどのコンテンツ (デモ番号ex7,8,9,10)

<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
	$(".swf").colorbox({iframe:true, innerWidth:400, innerHeight:280});      //デモ番号ex7
	$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});  //デモ番号ex8
        $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});    //デモ番号ex9
	$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});         //デモ番号ex10

    });
</script>
</head><body>
                 
  • $(".ajax");Aタグのクラスセレクター。".ajax"のajaxは、表示したい画像などコンテンツのAタグのクラス名。
    名前は任意。
  • iflame;コンテンツタイプがアイフレーム。trueの場合、外部のHTMLなどのコンテンツがアイフレームに表示される。デフォルトは、false。
  • innerWidth;表示画面の外枠およびボタンを含まない横のサイズ。書き方は、"75%"、"600px" または 600。
  • innerHeight;表示画面の外枠およびボタンを含まない縦のサイズ。書き方は、"75%"、"600px" または 600。
  • width;表示画面の外枠およびボタンを含む横のサイズ。書き方は、"75%"、"600px" または 600。
  • hight;表示画面の外枠およびボタンを含む縦のサイズ。書き方は、"75%"、"600px" または 600。

<!-- Aタグ設定 -->
     <a class='swf' href="content/swf/fukusia-c.swf" title="フラッシュ .swfファイル">フラッシュ / 動画 (SWFファイル)(ex7)</a>(ex7)<br>
     <a class='youtube' href="http://www.youtube.com/embed/M-tOFISk8Tk?rel=0&wmode=transparent"  title="こじはる">フラッシュ / 動画 (Iframe/Direct Link To YouTube)(ex8)</a>(ex8)<br>
     <a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">フラッシュ / 動画 (Iframe/Direct Link To Vimeo)(ex9)</a>(ex9)<br>
     <a class='iframe' href="http://www.cinematoday.jp/index.html">外部ウェブサイト (Iframe)</a>(ex10)
                 
インラインコンテンツ (デモ番号ex11)

<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
    $(".inline").colorbox({inline:true, width:"50%"});  //デモ番号ex11
    });
</script>
</head><body>
                 
  • $(".inline");Aタグのクラスセレクター。".inline"のinlineは、表示したい画像などコンテンツのAタグのクラス名。
    名前は任意。
  • inline;コンテンツタイプがインライン。trueの場合、カレントのHTML内のコンテンツを表示する。デフォルトは、false。
  • width;表示画面の外枠およびボタンを含む横のサイズ。書き方は、"75%"、"600px" または 600。
  • hight;表示画面の外枠およびボタンを含む縦のサイズ。書き方は、"75%"、"600px" または 600。

<!-- Aタグ設定 -->
   <a class='inline' href="#inline_content" title="インラインコンテンツの使用法">インラインHTML (Inline)</a>
                 
  • class;Aタグのクラス名。例えば、"youtube"。対応するjQuery設定のクラスセレクターのクラス名に合わせる。
    名前は任意。
  • href;表示するカレントHTML内のコンテンツのURL。
    書き方は、"#inline_content"、inline_contentは、DIVタグなどのID名。
  • インラインコンテンツの書き方。表示するコンテンツのブロックは隠します。
    
     <div style="display: none;>
       <div id="inline_content">
       HTMLテキストや画像
       </div>
     </div>
        
  • title;表示する動画などのコンテンツのタイトル(キャプション)。
  • クリックでデモを見ることができます。
    インラインHTML (Inline)(ex11)

 設定プロパティ・・・工事中!


プロパティ デフォルト 記述方法
transition "elastic" 表示のトランスミッションの種類(バリエーション、遷移)を指定。‘elastic’(伸び縮みする)か’fade’(フェード)か’none’で初期値は’elastic’。
speed 350 表示の速度を指定。初期値は350ミリセカンド(msまたはmsec)。トランスミッションの種類が‘elastic’か’fade’のとき。
href false 代替のアンカーURLとして使用したり、画像やフォームボタンなど非アンカー要素にURLを関連付けることができます。$("h1").colorbox({href:"welcome.html"});
This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. $("h1").colorbox({href:"welcome.html"});
title false アンカーのtitle属性の代替として使用することができます。This can be used as an anchor title alternative for Colorbox.
rel false アンカーのrel属性の代替として使用することができます。これにより、rel属性が異なる要素をグループ化することができるようになります。$("a.gallery").colorbox({rel:"group1"});
This can be used as an anchor rel alternative for Colorbox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. $("a.gallery").colorbox({rel:"group1"}); Note: The value can also be set to 'nofollow' to disable grouping.
scalePhotos true If true, and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, Colorbox will scale photos to fit within the those values.
scrolling true If false, Colorbox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of Colorbox.
opacity 0.85 The overlay opacity level. Range: 0 to 1.
open false If true, Colorbox will immediately open.
returnFocus true If true, focus will be returned when Colorbox exits to the element it was launched from.
trapFocus true If true, keyboard focus will be limited to Colorbox's navigation and content.
fastIframe true If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
preloading true Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable.
overlayClose true If false, disables closing Colorbox by clicking on the background overlay.
escKey true If false, will disable closing colorbox on 'esc' key press.
arrowKey true If false, will disable the left and right arrow keys from navigating between the items in a group.
loop true If false, will disable the ability to loop back to the beginning of the group when on the last element.
data false For submitting GET or POST values through an ajax request. The data property will act exactly like jQuery's .load() data argument, as Colorbox uses .load() for ajax handling.
className false Adds a given class to colorbox and the overlay.
fadeOut 300 Sets the fadeOut speed, in milliseconds, when closing Colorbox.
closeButton true Set to false to remove the close button.
国際化
current "image {current} of {total}" グループ表示のN枚中、n枚目表示のテキストを設定します。$('.colorbox').colorbox({current: '画像:{current}/{total}'})
Text or HTML for the group counter while viewing a group. {current} and {total} are detected and replaced with actual numbers while Colorbox runs.
previous "previous" グループ表示の「previous」ボタンのテキストを設定します。exsample5フォルダのCSSを使用時のみ有効。
Text or HTML for the previous button while viewing a group.
next "next" グループ表示の「next」ボタンのテキストを設定します。exsample5フォルダのCSSを使用時のみ有効。
Text or HTML for the next button while viewing a group.
close "close" 「close」ボタンのテキストを設定します。exsample5フォルダのCSSを使用時のみ有効。
Text or HTML for the close button. The 'esc' key will also close Colorbox.
xhrError "This content failed to load." ajaxで取得した際にロードできなかった場合のエラーメッセージを指定。 初期値は”This content failed to load.”。
Error message given when ajax content for a given URL cannot be loaded.
imgError "This image failed to load." 画像などのコンテンツのロードに失敗した場合のエラーメッセージを指定。 初期値は”This image failed to load.”。
Error message given when a link to an image fails to load.
コンテントタイプ(Content Type)
iframe false trueの場合、コンテンツをiframeで表示します。
If true, specifies that content should be displayed in an iFrame.
inline false

trueの場合、ドキュメント内の要素をコンテンツとして表示します。 $(".inline").colorbox({inline: true}); colorbox or $(".inline").colorbox({inline: true, href:"#myForm"}); or var $form = $("#myForm"); $(".inline").colorbox({inline: true, href:$form});
If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});

// Using a jQuery object: var $form = $("#myForm"); $("#inline").colorbox({inline:true, href:$form});

html false trueの場合、設定したHTMLを表示します。
For displaying a string of HTML or text: $.colorbox({html:"<p>Hello</p>"});
photo false If true, this setting forces Colorbox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg')
ajax This property isn't actually used as Colorbox assumes all hrefs should be treated as either ajax or photos, unless one of the other content types were specified.
大きさ(Dimensions)
width false 表示コンテンツの横サイズを指定。外枠とボタン表示部分も含まれる。初期値はfalse。
Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
height false 表示コンテンツの縦サイズを指定。外枠とボタン表示部分も含まれる。borderやbuttonも含まれる。 初期値はfalse。
Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
innerWidth false 表示コンテンツの横サイズを指定。外枠とボタン表示部分は含まれない。初期値はfalse。
This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
innerHeight false 表示コンテンツの縦サイズを指定。外枠とボタン表示部分は含まれない。初期値はfalse。
This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500
initialWidth 300 コンテンツを読み込む時の初期の幅を指定。 初期値は300。
Set the initial width, prior to any content being loaded.
initialHeight 100 コンテンツを読み込む時の初期の高さを指定。 初期値は100。
Set the initial height, prior to any content being loaded.
maxWidth false コンテンツの最大幅を指定。 初期値はfalse。
Set a maximum width for loaded content. Example: "100%", 500, "500px"
maxHeight false コンテンツの最大高さを指定。 初期値はfalse。
Set a maximum height for loaded content. Example: "100%", 500, "500px"
Slideshow
slideshow false グループの場合に、自動スライドショーするかどうの設定。初期値はfalse。
If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed 2500 スライドショーで次を表示するまでの時間を設定。 初期値は2500。
Sets the speed of the slideshow, in milliseconds.
slideshowAuto true trueの場合、スタート時にスライドショーを自動で開始する。 初期値はtrue。
If true, the slideshow will automatically start to play.
slideshowStart "start slideshow" スライドショー開始ボタンのテキストを設定できる。 初期値は”start slideshow”。exsample5フォルダのCSSを使用時のみ有効。
Text for the slideshow start button.
slideshowStop "stop slideshow" スライドショー停止ボタンのテキストを設定できる。 初期値は”stop slideshow”。exsample5フォルダのCSSを使用時のみ有効。
Text for the slideshow stop button
位置(Positioning)
fixed false ライトボックスを固定位置に表示するかどうかを指定。 初期値はfalse。
If true, Colorbox will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document.
top false fixedがtrueの時のtopからの位置を指定。 初期値はfalse。
Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.
bottom false fixedがtrueの時のbotomからの位置を指定。 初期値はfalse。
Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.
left false fixedがtrueの時のleftからの位置を指定。 初期値はfalse。
Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.
right false fixedがtrueの時のrightからの位置を指定。 初期値はfalse。
Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.
reposition true ウインドウサイズが変更されたときに、ボックス位置を変更するかどうかを指定。 初期値はtrue。
Repositions Colorbox if the window's resize event is fired.
Retina画像(Retina Images)
retinaImage false If true, Colorbox will scale down the current photo to match the screen's pixel ratio
retinaUrl false If true and the device has a high resolution display, Colorbox will replace the current photo's file extention with the retinaSuffix+extension
retinaSuffix "@2x.$1" If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix. For example, the default value would change `my-photo.jpg` to `my-photo@2x.jpg`
コールバック(Callbacks)
onOpen false Callback that fires right before Colorbox begins to open.
onLoad false Callback that fires right before attempting to load the target content.
onComplete false Callback that fires right after loaded content is displayed.
onCleanup false Callback that fires at the start of the close process.
onClosed false Callback that fires once Colorbox is closed.

Public Methods

$.colorbox() This method allows you to call Colorbox without having to assign it to an element. $.colorbox({href:"login.php"});
$.colorbox.next()
$.colorbox.prev()
These methods moves to the next and previous items in a group and are the same as pressing the 'next' or 'previous' buttons.
$.colorbox.close() This method initiates the close sequence, which does not immediately complete. The lightbox will be completely closed only when the cbox_closed event / onClosed callback is fired.
$.colorbox.element() This method is used to fetch the current HTML element that Colorbox is associated with. Returns a jQuery object containing the element. var $element = $.colorbox.element();
$.colorbox.resize() This allows Colorbox to be resized based on it's own auto-calculations, or to a specific size. This must be called manually after Colorbox's content has loaded. The optional parameters object can accept width or innerWidth and height or innerHeight. Without specifying a width or height, Colorbox will attempt to recalculate the height of it's current content.
$.colorbox.remove() Removes all traces of Colorbox from the document. Not the same as $.colorbox.close(), which tucks colorbox away for future use.

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (ie. cbox_complete & onComplete),
but can be used to make a universal change to Colorbox, while callbacks are only applied to selected elements.

// Example of using an event listener and public method to build a primitive slideshow:
$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});
cbox_open triggers when Colorbox is first opened, but after a few key variable assignments take place.
cbox_load triggers at the start of the phase where content type is determined and loaded.
cbox_complete triggers when the transition has completed and the newly loaded content has been revealed.
cbox_cleanup triggers as the close method begins.
cbox_closed triggers as the close method ends.

Lightbox系メディアビューア(まとめ サイト内リンク)

NoビューアーJSフレームワークモーダル
window*2
画像動画*1動画共有サイト
動画
Webページスライドシュー備考
1LightboxPrototypeからjQueryに変更(v2.51)モーダル人気
2PiroboxjQueryモーダル推奨
3Videoboxmootoolsモーダル
4Mediaboxmootoolsモーダル
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、
Yahoo! User Interface Library、
Ext (requires ext-core.js)、 非JSフレームを選択可
モーダル推奨
6ColorboxjQueryモーダル
7FotoramajQuery非モーダルスライダー
8FancyboxjQueryモーダル人気
動画とは、SWF、FLV、MOV、WMV(*1)  モーダルwindow:画像などメディアの表示は新しい別ウインドー(*2)

  最終更新日:2015.12.1(初版)
これはinlineコンテンツです。

(使用法)


<!-- jQuery設定 -->
<script>
  $(document).ready(function(){
    $(".inline").colorbox({inline:true, width:"50%"});  //デモ番号ex11
    });
</script>
</head><body>

<!-- Aタグ設定 -->
   <a class='inline' href="#inline_content">インラインHTML (Inline)</a>