【jQuery】 Colorboxを使う

Lightboxの派生プラグインであるColorBoxを使います。
Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。

準備

• Colorboxをダウンロードしてきます。

Colorbox - a jQuery lightbox

• 解凍して、任意のフォルダに移動。
• 「colorbox-master」フォルダ内の「example~」フォルダ内のindex.htmlを開き、独自の体裁に変更して別名保存。「example」フォルダは1~6まであり、それぞれモーダルウィンドウの効果が違うので、好みのものを選びます。

画像のグループ化

colorboxでは同じクラス名の要素同士をグループ化することが出来ます。HTML内でクラスを指定した後、jQueryのほうでもクラスを指定します。

実況例

jQuery:

$(document).ready(function(){
$(".group1").colorbox({rel:'group1'});
});

HTML:

<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

結果：

同じクラス同士がグループになっていることが分かります。

インナーフレームを表示する

インナーフレームをモーダルウィンドウに表示させる場合も、HTMLとjQueryで同じクラスを指定した上で、インナーフレームを表示するためにjQueryにプロパティを追加します。

書き方：

$(document).ready(function(){
$(".クラス").colorbox({iframe:true, innerWidth:横幅, innerHeight:縦幅});
});

実行例

jQuery:

$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});

HTML:

<p><a class='youtube' href="http://www.youtube.com/embed/9YWoX5vJq4s">TRICERATOPSのビデオ</a></p>

結果：

インラインHTMLを使う

インラインHTMLを使うことで、「display:none;」を設定してある要素をモーダルウィンドウに表示させることが出来ます。

書き方：
jQuery:

$(document).ready(function(){
$(".クラス名").colorbox({inline:true, width:"横幅"});
});

HTML:

<p><a class='inline' href="#アンカー飛ばし先のID">テキスト</a></p>

<div style='display:none'>
<div id='アンカー飛ばし先'>
<p>テスト</p>
</div>
</div>

実行例

jQuery:

$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});

HTML:

<p><a class='inline' href="#inline_content">テスト</a></p>

<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p>テスト</p>
</div>
</div>

結果：