lightbox、便利ですよね。あの、おなじみの画像をクリックしたら拡大するやつです。
WordPressとかだとプラグイン入れるだけなので簡単なのですが・・・サイトにjQueryライブラリを入れようと試みたところ、何度やっても動かない！
ダウンロードしたファイルにあるデモは動くのになんで・・・と思ったら、jsファイルの読み込み位置を変えたら動きましたので備忘録。
ダウンロード
こちらからダウンロードします。
ダウンロードしたZIPファイルを解凍し、使用するファイルは以下の６つです。
/dist/css/lightbox.css
/dist/images/close.png
/dist/images/loading.gif
/dist/images/next.png
/dist/images/prev.png
/dist/js/lightbox.min.js
読み込み
HTMLのhead内にCSSとjQueryを読み込みます。
<link type="text/css" rel="stylesheet" href="css/lightbox.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
HTMLのbodyの終了直前にlightboxを読み込みます。
<script language="javascript" type="text/javascript" src="js/lightbox.min.js"></script>
aタグへの設定
あとはaタグで囲んだimgタグを用意し、aタグにdata-lightbox要素を追加します。今回はsampleとしていますが任意のものでOKです。
画像をグループ化する場合は同じものを設定します。
<a href="images/sample01.jpg" data-lightbox="sample"><img src="images/sample01.jpg" width="250" alt="サンプル画像" /></a>
画像にタイトルを設定する場合はdata-title要素を追加してください。
<a href="images/sample01.jpg" data-lightbox="sample" data-title="サンプル画像"><img src="images/sample01.jpg" width="250" alt="サンプル画像" /></a>
はじめまして。
この記事本～～～当に助かりました。ありがとうございました。
また、ちょくちょく拝見させて頂きます。
コメントありがとうございます！
原因はわからないので推奨はできませんが（笑）、動かないより動いたほうが良いのでこの方法で実装しました。
また、よろしくお願いします（^^）
初めまして、私も、Lightboxが動かなくてずっと悩んでいました～
助かりました!! 本当にありがとうございました!
お返事していませんでしたm(_ _)m
ありがとうございます！！
また、よろしくお願いいたします♪
どうしても動いてくれなくて、動いているサイトをミラーリングして別のサイトに移しても動かない！！笑
仕方ないので、というより、これはシステム上の問題でしょ！（比較実験としては完璧なはず）
とお名前コムに（無駄を承知で）問い合わせしたが返事がなかなか来ない。
「lightbox 動かない」 で検索して、この情報があったので、jQueryってなに？状態の古い？jsを
の直前に移動したら・・・・なななんと、動きました。
＞動かないより動いたほうが良い
ま・さ・に
とーーーっても助かりました。
コメントありがとうございます！
お役に立ててよかったです〜(^^)
みなさんと同じコメントですが・・・
とーーーっても助かりました！
はなこ様
コメントありがとうございます(^^)