【簡単軽量】Colorboxでlightboxを実装する方法【jQuery】
この記事の概要

lightboxを実装したいなぁ…簡単にlightboxを実装する方法は無いかな?

ありますよ。あるjQueryプラグインを使えば簡単にlightboxを実装できます。この記事で詳しく紹介します。
本記事の内容
- jQueryプラグイン「Colorbox」を使ったlightboxを実装する方法
この記事では、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をオーバーライドしたりするなど方法がありますので、試してみてはいかがでしょうか。
おすすめ記事 【マイクラ】植木鉢に植えられる植物まとめ【全32種】
おすすめ記事 【マイクラ】バランスの取れた食事に必要な食べ物全40種類とその入手方法【進捗】
おすすめ記事 【マイクラ】マングローブの沼地の特徴と探し方
おすすめ記事 【マイクラ】アレイの特徴と探し方【ピリジャーの前哨基地・森の洋館】
おすすめ記事 【マイクラ】ディープダーク・古代都市の探し方や特徴