画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframeなどもLightbox 風に表示させるにはjQueryプラグインColorboxが便利です。
カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
Colorbox のダウンロード
以下のページからColorboxのファイル一式をダウンロードします。Colorbox – a jQuery lightbox
Colorbox の設置
jQueryファイルと一緒にjquery.colorbox.jsとcolorbox.cssのファイルを <head> 内に設置します。|
1 2 3 |
<link rel="stylesheet" type="text/css" href="./colorbox/colorbox.css" /> <script src="./jquery.js" ></script> <script src="./colorbox/jquery.colorbox.js"></script> |
画像をオーバーレイで表示
まずはLightbox のように、リンクをクリックして画像単体をオーバーレイで表示する方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $(".group1").colorbox({ rel:'group1' }); }); </script> … <a href="./images/colorbox01_l.jpg" class="group1" title=""> <img src="./images/colorbox01_s.jpg" alt="" /></a> |
※group1の名称は自由に変更できます。
Colorbox で画像を表示するデモ
スライドショーで表示する
複数妹の画像をスライドショーで表示させる方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $(".group4").colorbox({ rel:'group4', slideshow:true }); }); </script> … <a href="./images/colorbox01_l.jpg" class="group4" title=""> <img src="./images/colorbox01_s.jpg" alt="" /></a> <a href="./images/colorbox02_l.jpg" class="group4" title=""> <img src="./images/colorbox02_s.jpg" alt="" /></a> <a href="./images/colorbox03_l.jpg" class="group4" title=""> <img src="./images/colorbox03_s.jpg" alt="" /></a> <a href="./images/colorbox04_l.jpg" class="group4" title=""> <img src="./images/colorbox04_s.jpg" alt="" /></a> |
slideshow:trueでスライドショーを使えるようにします。
また、jquery.colorbox.jsファイルを開いて
|
1 |
slideshowSpeed: 2500, |
の数値を変更する事で、スライドの切り替えスピードを調整することもできます。
Colorbox でスライドショーを表示するデモ
Youtube 動画を表示する
Youtube 動画もLightbox 風に表示することができます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $(".youtube").colorbox({ iframe:true, innerWidth:425, innerHeight:344 }); }); </script> … <a href="http://www.youtube.com/embed/********" class="youtube" title=""> <img src="http://i2.ytimg.com/vi/********/default.jpg" alt="" /></a> |
innerWidth、innerHeightで動画のサイズを指定します。
Youtube の場合は動画のサムネイルも複数サイズ取得できますので、詳細はYoutube動画で様々なサイズのサムネイル画像を取得する方法の記事もご覧下さい。
Colorbox でYoutube 動画を表示するデモ
inline コンテンツを表示する
inline コンテンツを Lightbox 風に表示します。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $(document).ready(function(){ $(".inline").colorbox({ inline:true, width:"100%" }); }); </script> … <a href="#inline_content" class="inline" title=""> <img src="./images/colorbox05_s.jpg" alt="" /></a> <div style='display:none'> <div id='inline_content'> <p><img src="./images/colorbox05_l.jpg" alt="inline コンテンツ"></p> inline コンテンツ</p> </div> </div> |
オーバーレイでの表示の際にスクロールバーが出る場合はwidthのオプションを調整します。
Colorbox で inline コンテンツを表示するデモ
iframe を表示する
iframe を表示させる方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $(".iframe").colorbox({ iframe:true, width:"80%", height:"80%" }); }); </script> … <a href="./images/iframe.html" class="iframe" title=""> <img src="./images/colorbox06_s.jpg" alt="" /></a> |
inlinコンテンツ同様、オーバーレイでの表示の際にスクロールバーが出る場合はwidthやheightのオプションを調整します。
Colorbox で iframe を表示するデモ
コメント