【イラスト・写真展示】Lightboxの設置方法と使い方

Lightboxとは、サムネイル画像やリンク文字をクリックすると、画面が暗くなるとともにリンク先の画像がズームして表示されるjQueryスクリプトです。詳しい挙動は公式サイトのデモをご確認ください。

Lightbox2

Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

当サイトで配布しているhtmlテンプレートにも使用しています。

ページ遷移せずに大きな画像をサクサク表示できるため、イラスト・写真の展示によく使われます。導入も簡単で、MITライセンスに基づいており、改造や再配布、商用利用や販売物への利用も認められていることから、多くのサイトに導入されています。

この記事では、Lightboxの使い方・カスタマイズ方法を紹介します。

～宣伝～
当サイトではLightboxをよりシンプルで今風のデザインにしたJavascriptスクリプト「fuwaimg」を配布しています。日本語マニュアル完備でjQueryも不要ですので、よければこちらもチェックしてみてください。

fuwaimg

LightBoxのような、リンクをクリックすると画像がふわっと表示されるプログラム。 javascript製、jQuery不使用。

Lightboxの導入方法

当サイトで配布しているテンプレートには標準導入されていますので、この手順は不要です。「Lightboxの使い方」まで読み飛ばしてください。

ソースコードをダウンロードする

公式ホームページから、ソースコードをダウンロードします。

GETTING STARTEDの項目に「Github Releases page」というリンクがあります。ここからSource codeをダウンロード、解凍します。

解凍するとなにやらたくさんファイルが入っていますが、使うものは以下だけです。

src > css > lightbox.css
src > js > lightbox.js
src > imagesの中に入っている画像４点

これらをサーバーの適当な場所にアップロードします。

サイトでソースコードを読み込ませる

<head>　～　</head>の中で、lightbox.cssおよびlightbox.jsを読み込ませます。相対パスは、ファイルの置き場所に合わせて書き換えてください。
※jQueryプラグインですので、必ずjQueryを先に読み込ませてください。

<link rel="stylesheet" href="css/lightbox.css">
<script src="js/lightbox.js" type="text/javascript"></script>

これでLightboxを利用する準備ができました。

Lightboxの使い方

<a href="表示したい画像のパス" data-lightbox="group" data-title="ここに説明"><img src="サムネイル画像のパス"></a>

aタグに「data-lightbox=”〇〇〇”」というプロパティを与えると、Lightboxが適用され、クリックしたときにhrefで指定した画像が表示されます。data-title=”〇〇〇”のプロパティを与えると、画像下部にキャプションをつけることができます。

画像のグループ分け

関連する画像のグループは、data-lightboxの値を同じにすることでまとめることができます。

<a href="img01.jpg" data-lightbox="group-a" data-title="旅の画像１"><img src="..."></a>
<a href="img02.jpg" data-lightbox="group-a" data-title="旅の画像２"><img src="..."></a>
<a href="img03.jpg" data-lightbox="group-a" data-title="旅の画像３"><img src="..."></a>

<a href="img04.jpg" data-lightbox="group-b" data-title="犬の画像１"><img src="..."></a>
<a href="img05.jpg" data-lightbox="group-b" data-title="犬の画像２"><img src="..."></a>

このように設定すると、group-a（旅の画像グループ）はそれだけで、group-b（犬の画像グループ）はそれだけで、矢印ボタンのページ送りでまとめて見ることができます。

ページ送りを使わず、画像を単独で表示したい場合は、すべてのdata-lightboxの値を異なる値で設定します。

トラブルシューティング

data-lightboxの値を指定しているのに、普通のリンクになる

jQueryを読み込んでいますか？
Lightboxのjsファイル・cssファイルの相対パスは間違っていませんか？

LightboxはjQueryを使わなければ動きません。head内でjQueryを読み込んでご利用ください。また、Lightboxのソースコードを設置した場所と、読み込む記述の相対パスが一致していないと動きません。一度確認してみましょう。

Lightboxは動いたけど、×やページ送り矢印が表示されない

cssファイル内の画像を呼び出す記述の、相対パスが間違っている可能性があります

lightbox.css内の記述の画像の相対パスは、デフォルトの状態ではurl(../images/〇〇.png)になっています。例えば、当該画像を入れているフォルダ名がimgであれば、正しい相対パスは../img/〇〇.pngですので当然画像は読み込めません。正しい相対パスに修正しましょう。