画像の拡大表示やギャラリーなどで役立つライトボックス。
Lightbox2.jsはド定番のプラグイン。
使う頻度が高いので、ついついバージョンアップしても同じものを使い続けていましたが
久しぶりに公式サイトの新しいバージョンをダウンロードしなおして設置したところ
動かない！バージョン2.8からlughtboxの読込が終了bodyタグの直前に変わったようです。
読込順序を変更したら、正常に動きました。
備忘録として、今回はLightbox2の基本的な導入方法を
ご紹介します。
もくじ
使い方
まずは公式サイトからダウンロードします。
デモもこちらのページで見ることができます！
公式サイトはこちら
必要なファイル
css/lightbox.css もしくは css/lightbox.min.css
js/lightbox.js もしくは js/lightbox.min.js
imagesフォルダの画像
images/close.png
images/loading.gif
images/next.png
images/prev.png
HTML
head内でjQueryとlightboxのcssを読み込みます。
階層等は環境によって変更してください。
<script src="./js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./common/css/lightbox.css" />
</head>
body内
aタグにdata-lightboxの記述をすることで動きます。同じ名前を指定することでグループと認識され、
連続で次の画像を表示できるようになります。
data-titleにタイトルやキャプションなどを記述すると画像の下に表示することができます。
<a href="./img/photo01.jpg" data-lightbox="photo" data-title="Title" alt="">ここにサムネイルやリンクテキストがはいります</a>
<a href="./img/photo02.jpg" data-lightbox="photo" data-title="Title" alt="">ここにサムネイルやリンクテキストがはいります</a>
最後に、冒頭でも触れました、lightboxの読込をbody終了の直前に記述します。
<script src="./js/lightbox.js" type="text/javascript"></script>
</body>
以上で完了です。簡単です。