プラカンブログSTAFF BLOG

2016.03.28

「colorbox.js」の使い方 ~簡単で便利なモーダルウィンドウ~

こんにちは。デザイナーの(鈴)です。
今回はモーダルウィンドウで有名な「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本体ファイルの読み込みを忘れずに!


記述方法

画像、youtube動画、インライン、別htmlで表示する4パターンを紹介します。
※script部分はhead内でも外部JSとして読み込んでも問題なく動作します。

【画像の場合】

$(function() {
$(".img_box").colorbox();
});


画像

【youtube動画の場合】

$(function() {
$(".movie_box").colorbox({
iframe:true,  
innerWidth:425,   //幅の指定
innerHeight:344 //高さの指定
});
});


動画

【インライン場合】

$(function() {
$(".inline_box").colorbox({
inline: true
});
});


インラインhtml

インラインhtml

【別html場合】

$(function() {
$(".iframe_box").colorbox({
iframe:true,  
innerWidth:600,   //幅の指定
innerHeight:400 //高さの指定
});
});


別html

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/

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc (鈴)

この記事は、SUZUKI が書きました。