[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」
スポンサード
スポンサード
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。
カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
目次
Colorbox のダウンロード
以下のページからColorbox のファイル一式をダウンロードします。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> |
inline コンテンツ同様、オーバーレイでの表示の際にスクロールバーが出る場合は width
や height
のオプションを調整します。
Colorbox で iframe を表示するデモ
スポンサード
コメント