【簡単軽量】Colorboxでlightboxを実装する方法【jQuery】
Web制作者
「lightboxを実装したい」
「簡単にlightboxを実装する方法を知りたい」
こういった要望にお応えします。
本記事の内容
- jQueryプラグイン「Colorbox」を使ったlightboxを実装する方法
こんにちは、mineです。
Web制作歴は7年になります。
この記事では、lightboxを簡単に実装できるjQueryプラグイン「Colorbox」をご紹介します。
lightboxとは？
Colorboxとは？
Colorboxを使用することで、とてもに簡単にlightboxを実装できます。
サムネイルの一覧を表示するギャラリーページ（特にフォトギャラリー）などを手軽に作りたいという方におすすめの方法です。
Colorboxの導入手順
ここから、Colorboxの導入手順についてご紹介します。
イメージ
複数のサムネイルが並んでいてクリックすると画像が拡大表示され、さらに拡大された状態で画像の切り替えができるようなlightboxを実装してみます。
「Colorbox」をダウンロード
公式サイトへアクセスし（下記リンク参照）、「Download」ボタンをクリックして必要なファイルをダウンロードします。
ダウンロードしたファイルの中で、下記ファイルをサーバーへアップロードします（アップロード場所は任意）。
CSSと画像は今回example2のものを使用します。
アップロードするファイル
- jquery.colorbox-min.js
- colorbox.css（今回はexample2フォルダの中のもの）
- imagesフォルダすべて（今回はexample2フォルダの中のもの）
HTML
<a href="(image_file)/sample01.jpg" class="gallery">
<img src="(image_file)/sample01.jpg" width="240" height="160" />
</a>
<a href="(image_file)/sample02.jpg" class="gallery">
<img src="(image_file)/sample02.jpg" width="240" height="160" />
</a>
<a href="(image_file)/sample03.jpg" class="gallery">
<img src="(image_file)/sample03.jpg" width="240" height="160" />
</a>サムネイル用の画像（小さめの画像）を並べて、それぞれ拡大後の画像（元画像）へリンクさせています。
今回は、拡大表示した状態で画像を切替えたいので、それぞれの<a>タグにクラス名galleryを付与しておきます。
CSS
<link rel="stylesheet" href="(filepath)/colorbox.css" type="text/css" media="all" />colorbox.cssを読み込みます（filepathは任意の場所）。特にそれ以外は記述はしません。
jQuery
<head>内記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>jQueryを<head>内に記述します。
Colorboxのjsファイル
<script type='text/javascript' src='(filepath)/jquery.colorbox-min.js'></script>jquery.colorbox-min.jsを読み込みます（filepathは任意の場所）。
$(function() {
$(".gallery").colorbox({
rel:"gallery",
maxwidth:"90%",
maxheight:"80%",
opacity: 0.7,
speed: 300
});
});公式サイトによると、多くのオプションが用意されていますが、今回はその中でも代表的なものをご紹介します。
Colorboxオプション
rel:同じクラスをもつ要素をグループ化するmaxWidth:ロードされたコンテンツの最大幅を設定します。maxHeight:ロードされたコンテンツの最大の高さを設定します。opacity:オーバーレイの不透明度speed:フェード速度と画像遷移の速度指定（ミリ秒）
まとめ
Colorboxによるlightbox実装のポイントをおさらいしておきます。
ポイント
- jQueryを読み込み
- 公式からColorboxのCSSファイル・JSファイルをダウンロード・読み込み
- オプションを指定して、Colorbox実行のjavascriptコードを記述する
ファイルをダウンロードして読み込ませて、数行のHTMLとjQueryを書くだけで、立派なlightboxが実装できることがお分かりいただけたと思います。
もう少し細かいカスタマイズについては、用意されているオプションを使用したり、CSSをオーバーライドしたりするなど方法がありますので、試してみてはいかがでしょうか。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果