jQuery 2015-03-19

動画もLightbox風に表示出来るColorbox 使い方

今回は、画像や動画などをオーバーレイ表示出来るLightbox系jQueryプラグイン【Colorbox】の使い方のご紹介です。

こちらの【colorbox】は、画像だけではなく動画やinlineコンテンツなどのもオーバーレイで表示出来るので、大変便利なjQueryプラグインとなっています。
また、オーバーレイのスタイルも5種類ほど用意してあり対応したCSSを読み込めば対応しています。
実装のハードルも高くなく割と簡単に実装も出来ると思います。

実際に【Colorbox】を利用したデモサイトもありますので、ご参考下さい。

デモサイト

実装するのであれば、下記リンク先より必要ファイルをダウンロードして下さい。

Clorbox

Colorbox 使い方

それでは、jQueryプラグイン【Colorbox】の使い方をご説明していきます。
実装するにあたりこちらより必要なファイルなどを事前にダウンロードしておいて下さい。

また、今回ダウンロードしたファイルの中で使うファイルは【jquery.colorbox.js】とexample2のファルダ内にある【imagesフォルダ】と【colorbox.css】を使います。
オーバーレイ後のスタイルを変更したい時は、ご自身でカスタマイズしてもいいですし、ダウンロードしたフォルダ内の【example】内のCSSを使ってもOKです。

ここで注意するのが、【images】フォルダを【colorbox.css】と同じ階層にしておかないと画像が表示されません。

必要ファイルの読み込み

まずは、jQuery本体とダウンロードした【jquery.colorbox.js】【colorbox.css】をhead内に読み込みます。
ファイルの階層などは、ご自身の環境に合わせて変更して下さい。

<link href="css/colorbox.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.colorbox.js"></script>

HTMLの準備

今回は、クラス名を揃えて画像を5枚グループ化しています。
a要素のtitle属性に記述したテキストがキャプションとして表示されます。

  <ul>
  	<li><a href="img/img-01.jpg" class="img-group" title="キャプション">画像1</a></li>
  	<li><a href="img/img-02.jpg" class="img-group" title="キャプション">画像2</a></li>
  	<li><a href="img/img-03.jpg" class="img-group" title="キャプション">画像3</a></li>
  	<li><a href="img/img-04.jpg" class="img-group" title="キャプション">画像4</a></li>
  	<li><a href="img/img-05.jpg" class="img-group" title="キャプション">画像5</a></li>
  </ul>

JavaScript

上記のa要素のクラス名を指定しています。

<script>
$(document).ready(function(){
    $(".img-group").colorbox({
        rel:'img-group',
    });
});
</script>

上記までを記述すれば、jQueryプラグイン【Colorbox】の実装の完了となります。
万が一画像をオーバーレイしてNEXTナビなどの画像が出ない場合は、ダウンロードした【images】フォルダの階層などを見なおしてみてください。

デモサイト

Colorboxでは、この他にもオプションなどが用意されており、下記でも紹介しておりますが、その他にも多彩なオプションが用意されていますので、下記リンク先でご確認下さい。

Colorbox オプション

画像をスライドショーで表示

画像をスライドショーで表示する場合は、下記のコードを記述します。

<script>
$(document).ready(function(){
    $(".img-group").colorbox({
        rel:'img-group',
	slideshow:true,
	slideshowSpeed:1500,
    });
});
</script>

slideshowSpeedでスライド切り替え時のスピードを調整が出来ます。

YouTube を表示する

YouTubeの動画をオーバーレイで表示する場合は、下記のコードを記述します。

<script>
$(document).ready(function(){
    $(".youtube").colorbox({
        iframe:true,
        innerWidth:700,
        innerHeight:433,
    });
});
</script>

<a href="https://www.youtube.com/embed/wp1jaq3fKR4?list=RDYFnyAHx1p0o" class="youtube">YouTube</a>

innerWidthとinnerHeightで動画の幅と高さを指定します。
HTMLに関しては、一緒でグループ化も可能です。