制作記事 Web制作開発ツールライブラリLightbox 2 を使うための最小設定

Lightbox 2 を使うための最小設定

ライトボックスをお手軽に実装できるためのライブラリは「lightbox」で検索してみると分かるとおりサイト上にたくさんあって、大変ありがたい。
その中で個人的に「Lightbox 2」が気に入ったので、その導入事例をご紹介。

Lightbox 2 を使うための最小設定のサンプル

必要なファイル

※必要なファイルはすべて、Lightbox 2からダウンロードできます。

javascriptファイル

  • jquery-1.7.2.min.js(jQuery
  • lightbox.js

すでにjQueryを導入済みであれば「jquery-1.7.2.min.js」は不要。

CSSファイル

  • lightbox.css

画像1

  • close.png
  • loading.gif
  • next.png
  • prev.png

画像2

  • ライトボックスで表示したい画像とライトボックスを表示させるためのサムネイル画像

設置方法

1枚ごとにライトボックスする場合

<a href="images/examples/image-2.jpg" rel="lightbox" title="キャプションあり"><img src="images/examples/thumb-2.jpg" alt="" /></a>
images/examples/image-2.jpg
大きい画像URL
[重要] rel="lightbox"
この属性をaタグ要素に追加することでライトボックスが機能します。
title="キャプションあり"
ここにセットしたテキストがライトボックスの左下に表示されます(テキストを表示させたいときのみ必要)。
images/examples/thumb-2.jpg
サムネイル画像URL

ライトボックス表示時上でページ送りをしたい場合

<a href="images/examples/image-3.jpg" rel="lightbox[a]" title="画像キャプション1"><img src="images/examples/thumb-3.jpg" alt="" /></a>
<a href="images/examples/image-4.jpg" rel="lightbox[a]" title="画像キャプション2" ><img src="images/examples/thumb-4.jpg" alt="" /></a>
lightbox[a]
relの値を「[]」の中を共通にすることでライトボックス表示時上でページ送りができるようになります。

同じページでライトボックスを複数設置したい場合

<a href="images/examples/image-1.jpg" rel="lightbox[a]" title="画像キャプション1"><img src="images/examples/thumb-3.jpg" alt="" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox[a]" title="画像キャプション2" ><img src="images/examples/thumb-4.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[b]" title="画像キャプション3"><img src="images/examples/thumb-3.jpg" alt="" /></a>
<a href="images/examples/image-4.jpg" rel="lightbox[b]" title="画像キャプション4" ><img src="images/examples/thumb-4.jpg" alt="" /></a>
lightbox[a]
lightbox[b]
relの値を「[]」の中が共通であるグループを複数用意すると、その分だけライトボックスが設定できます。