• RSS

[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。

カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。

Colorbox のダウンロード

以下のページからColorbox のファイル一式をダウンロードします。


Colorbox の設置

jQuery ファイルと一緒に jquery.colorbox.jscolorbox.css のファイルを <head> 内に設置します。
<link rel="stylesheet" type="text/css" href="./colorbox/colorbox.css" />
<script src="./jquery.js" ></script>
<script src="./colorbox/jquery.colorbox.js"></script>


画像をオーバーレイで表示

まずはLightbox のように、リンクをクリックして画像単体をオーバーレイで表示する方法です。
<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 で画像を表示するデモ


スライドショーで表示する

複数妹の画像をスライドショーで表示させる方法です。
<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 ファイルを開いて
slideshowSpeed: 2500,
の数値を変更する事で、スライドの切り替えスピードを調整することもできます。

Colorbox でスライドショーを表示するデモ


Youtube 動画を表示する

Youtube 動画もLightbox 風に表示することができます。
<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>
innerWidthinnerHeight で動画のサイズを指定します。

Youtube の場合は動画のサムネイルも複数サイズ取得できますので、詳細はYoutube 動画で様々なサイズのサムネイル画像を取得する方法の記事もご覧下さい。

Colorbox でYoutube 動画を表示するデモ


inline コンテンツを表示する

inline コンテンツを Lightbox 風に表示します。
<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 を表示させる方法です。
<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 コンテンツ同様、オーバーレイでの表示の際にスクロールバーが出る場合は widthheight のオプションを調整します。

Colorbox で iframe を表示するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント