lightboxを使ったけどなかなか動かなくてJSの読み込みをbodyの閉じる直前にしたら動いた話

lightbox

lightbox、便利ですよね。あの、おなじみの画像をクリックしたら拡大するやつです。

WordPressとかだとプラグイン入れるだけなので簡単なのですが・・・サイトにjQueryライブラリを入れようと試みたところ、何度やっても動かない!
ダウンロードしたファイルにあるデモは動くのになんで・・・と思ったら、jsファイルの読み込み位置を変えたら動きましたので備忘録。

サンプルページはこちら

ダウンロード

こちらからダウンロードします。

ダウンロードしたZIPファイルを解凍し、使用するファイルは以下の6つです。

/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>
sponsored link

lightboxを使ったけどなかなか動かなくてJSの読み込みをbodyの閉じる直前にしたら動いた話” への6件のフィードバック

  1. はじめまして。
    この記事本~~~当に助かりました。ありがとうございました。
    また、ちょくちょく拝見させて頂きます。

    1. コメントありがとうございます!
      原因はわからないので推奨はできませんが(笑)、動かないより動いたほうが良いのでこの方法で実装しました。
      また、よろしくお願いします(^^)

  2. 初めまして、私も、Lightboxが動かなくてずっと悩んでいました~
    助かりました!! 本当にありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA