Lightbox最新版（2.7.1）の設置方法と使い方

画像をモーダルウィンドウでお洒落に表示することができる定番スクリプト「Lightbox」ですが、検索しても古いバージョンの設置方法ばかりヒットするので、最新版の設置方法と使い方を載せておきます。

デモ作った

Lightboxって何？って人は見てみてください。知ってる人は飛ばしてOK！ こういうお洒落な演出を、簡単な記述だけで実現できるってのがLightboxの魅力です。

STEP1:ダウンロード

とりあえずLightbox本体をダウンロードしましょう。 次に、Lightboxを動作させるためのjQueryもダウンロードしておきましょう（一応Lightbox本体にもjQueryが同梱されていますが、古いバージョンの場合があります） 色々ありますが、最新バージョンの圧縮版でOKです。 もちろん、Googleにホスティングされているものを使ってもOKなので、その場合は以下のコードをhead内に記述します。 LeoTiger_7はこっちの方法でやってます（楽だから）。

STEP2：ファイルを配置

ダウンロードしたLightbox本体を解凍すると、こんな感じの構成になっています。 これを自分のサイトに配置するんですが、必要なファイルは以下の通り。

• css/lightbox.css
• js/lightbox.min.js
• img/close.png
• img/loading.png
• img/next.png
• img/prev.png

これだけで動きます。それぞれ自分のサイトのCSS、JS、imgフォルダに移しましょう。

STEP3：設置方法

先ほど配置したファイルを読み込みます。 これでLightboxを使う準備が整いました。

STEP4：使い方

画像にリンクしたaタグに「data-lightbox」という属性を与えると、Lightboxが動作します。
属性値は何でもOKですが、ここに入れた値でグループ化（後述）されるという点は覚えておきましょう。 また、画像にはキャプションを付けることも可能です。その場合はaタグに「data-title」という属性を加えます。

画像のグループ化

Lightboxは「data-lightbox」に指定した値で画像をグループ化します。 上記の例だと「data-lightbox」に「group」という値を与えられた画像がグループ化され、画像に次の（前の）画像に移るためのボタンが表示されるようになります。

---

以上、Lightboxの設置方法、使い方の解説でした。