2020/07/08

【簡単軽量】Colorboxでlightboxを実装する方法【jQuery】

Programming Web

Web制作者
「lightboxを実装したい」
「簡単にlightboxを実装する方法を知りたい」

こういった要望にお応えします。

本記事の内容

jQueryプラグイン「Colorbox」を使ったlightboxを実装する方法

こんにちは、mineです。
Web制作歴は7年になります。

この記事では、lightboxを簡単に実装できるjQueryプラグイン「Colorbox」をご紹介します。

lightboxとは？

lightboxは、サムネイルの画像をクリック→画面の最前面に画像を拡大表示（モーダルのような感じ）する機能のことです。

Colorboxとは？

Colorboxとは、lightboxを簡単に実装するためのjQueryプラグインです。
Colorboxを使用することで、とてもに簡単にlightboxを実装できます。

サムネイルの一覧を表示するギャラリーページ（特にフォトギャラリー）などを手軽に作りたいという方におすすめの方法です。

Colorboxの導入手順

ここから、Colorboxの導入手順についてご紹介します。

イメージ

複数のサムネイルが並んでいてクリックすると画像が拡大表示され、さらに拡大された状態で画像の切り替えができるようなlightboxを実装してみます。

「Colorbox」をダウンロード

公式サイトへアクセスし（下記リンク参照）、「Download」ボタンをクリックして必要なファイルをダウンロードします。

Colorbox – a jQuery lightbox

ダウンロードしたファイルの中で、下記ファイルをサーバーへアップロードします（アップロード場所は任意）。
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日分を取得した話

おすすめ記事お名前.comのドメインプロテクションは必要か【採算がとれるか】

Programming

【簡単軽量】Colorboxでlightboxを実装する方法【jQuery】

Colorboxの導入手順

「Colorbox」をダウンロード

HTML

CSS

jQuery

まとめ

RELATED