プラカンブログSTAFF BLOG

2016.03.28

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

title

こんにちは。デザイナーの(鈴)です。
今回はモーダルウィンドウで有名な「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として読み込んでも問題なく動作します。

【画像の場合】



画像

【youtube動画の場合】



動画

【インライン場合】



インラインhtml

インラインhtml

【別html場合】



別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/

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