こんにちは。デザイナーの（鈴）です。
今回はモーダルウィンドウで有名な「colorbox.js」を紹介します。
「colorbox.js」とは
画像や動画、htmlをモーダルウィンドウとして表示するプラグインです。
よく使われているプラグインだけあり、実装が簡単です。
「colorbox.js」の導入
必要なファイルを下記公式ページの「Download」から一式ダウンロード。
http://www.jacklmoore.com/colorbox/
ダウンロードしたフォルダ内には
example1～example5のデザインの異なるデータが格納されています。
好みのデザインのフォルダから下記2つを読み込みます。
jquery.colorbox-min.js
colorbox.css
「images」フォルダ内の画像も必要になります。
colorbox.cssと同じ階層に設置します。
※階層を変える場合はcolorbox.css内の画像の読み込みの変更に注意しましょう。
読み込む記述は下記のようになります。
※jQuery本体ファイルの読み込みを忘れずに！
<link rel="stylesheet" type="text/css" href="jquery.sidr.light.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.sidr.min.js"></script>
記述方法
画像、youtube動画、インライン、別htmlで表示する4パターンを紹介します。
※script部分はhead内でも外部JSとして読み込んでも問題なく動作します。
【画像の場合】
$(function() {
$(".img_box").colorbox();
});
<a href="img/img01.jpg" class="img_box">画像</a>
【youtube動画の場合】
$(function() {
$(".movie_box").colorbox({
iframe:true,
innerWidth:425, //幅の指定
innerHeight:344 //高さの指定
});
});
<a href="YouTubeのパス" class="movie_box">動画</a>
【インライン場合】
$(function() {
$(".inline_box").colorbox({
inline: true
});
});
<a href="#inline_content" class="inline_box">インラインhtml</a>
<div>
<div id="inline_content">
<p>インラインhtml</p>
</div>
</div>
【別html場合】
$(function() {
$(".iframe_box").colorbox({
iframe:true,
innerWidth:600, //幅の指定
innerHeight:400 //高さの指定
});
});
<a href="iframe_content.html" class="iframe_box">別html</a>
html内に複数設置も可能です。
※その際はclass名に注意しましょう。
実装してみて
さすが「colorbox.js」です！！
実装が簡単なのはもちろんですが、
画像、動画、インライン、別htmlなど幅広い表示ができるので、
様々な案件で助けてもらっています。
特に複数のページから同じ内容を表示する時には、
インラインだと管理上不便なので、
別htmlにも対応している点が一番ありがたいです。
今回はオプションについては説明しませんが、
オプションの種類も多いので、
状況に合わせた使用方法が可能です。
便利なので、ぜひ試してみてはいかがでしょうか。
参考リンク
下記サイトは参考にしたサイトになります。
オプションの説明もあるので、詳しく知りたい方はどうぞ。
http://webdesignmagazine.net/javascript/colorbox_yutube/
http://cly7796.net/wp/javascript/plugin-jquery-colorbox/
http://www.webantena.net/javascriptjquery/jquery-plugin-colorbox/
