モーダルウィンドウで画像を見せられるライトボックス型のプラグインは実に色々な種類がリリースされていますね。しかもオープンソースなので、無料な上にライセンス制約もすくなかったり（まったくないという訳じゃないので注意です）。数あるライトボックスの中からもっともよく知られたLightboxのバージョン2の使い方を紹介します。
バージョン1の方はrel属性を使用していたためHTML5の書式とそぐわなくなったということのようです。data-lightboxという属性を当て直したのがバージョン2。レスポンシブにも耐えるし、スマートフォンでもほぼ問題なく動くので、使いやすいです。ieの対応状況はわかっていませんが、まあ、ie6を除けばほとんど問題ないんじゃないですか。
こんなうんちくはよそにして、本題へ。
1 必要なファイルを本サイトからダウンロード
Lightbox2サイトにある『ダウンロード』と書かれたリンクからZIPファイルをダウンロードして解凍します。
GIThubからダウンロードしてもいいですね。
Jqueryも必要なのでダウンロードしといてください。バージョンは1.10.2あたりでいいと思います。
Jqueryのサイト。
とりあえず
jquery-1.10.2.min.js
lightbox-2.6.min.js
が揃いました。jsというフォルダを作ってその中に入れてアップします。
こいつらを読み込ますためにhtmlにコードを書きます。
jQueryを先の読み込まさないといけないので
<script src="js/jquery-1.10.2.min.js"> </script>
<script src="js/lightbox-2.6.min.js"> </script>
という順序で張り付けてください。head内でもbodyの終了前でもいいですね。
同梱にされていた
lightbox.css
はcssというフォルダに入れてアップし、
<link href="css/lightbox.css" rel="stylesheet">
とhtmlに張り付けてください。
これはhead内です。
次は画像フォルダです。
close.png, loading.gif, prev.png, and next.png.
これらの入っているimgフォルダをアップします。
cssから呼び出されるのでimgというフォルダ名は守ってください。もし変えたければcss内のimgという記述を書き換えてください。とりあえずこのまま実験して動かしてみるのがよいでしょう。改造は後からで。
2 とりあえず表示
こんな記述をどっかに張り付けてください。
<a href="img/image-1.jpg" data-lightbox="image-1" title="キャプション">ライトボックスで画像が出ます </a>
data-lightbox="image-1"というのがミソです。ようはこの data-lightbox="image-1"というのがついているリンクはみんなライトボックスで表示します、っつうことです。
ライトボックスで表示した画像は、ボタンで前後におくれるので便利ですね。そのおくる画像のグループ分けもできます。
<a href="img/image-1.jpg" data-lightbox="group1">グループ１で見せたい画像</a>
<a href="img/image-2.jpg" data-lightbox="group2">グループ2で見せたい画像</a>
というように
data-lightbox="group2"
で指定を変えてあげればいいわけですね。
