lightboxの設置

--- 2016年7月4日 (月) ---

まず [lightbox] をダウンロードし 圧縮ファイルを展開すると、いくつかのフォルダとファイルが解凍される。基本的に、使用するのは「js」フォルダの中にある[lightbox.js]と、「css」フォルダの中にある[lightbox.css]、それと「img」フォルダの中の、ベースとなる4つの画像(close.png、loading.gif、next.png、prev.png)だ。

手順
(1)まず html ファイルの <head>〜</head> 内の任意の場所に、以下のコードを記述する。

<link rel=”stylesheet” href=”css/lightbox.css”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>

各ファイルへのパスは環境に合わせて書き換えること。

(2)続いて <body>〜</body> 内の[Lightbox]を組み込みたい箇所のアンカー要素に「rel=”lightbox”」を追加し、さらに、「href」プロパティでは拡大表示させたい画像を指定。具体的には以下のような記述になる。

<a href=”images/img-1.jpg” rel=”lightbox”><img src=”images/thumb-1.jpg” alt=”” /></a>

また、[Lightbox]には画像をグループ化して前後の画像とリンクさせることも可能で、この場合は、通常「rel=”lightbox”」と記述するところを、「rel=”lightbox[sample-group]”」と書き換えればOK。[sample-group]の文字は自分で適宜決める。

ほとんどのサイトが以上の様に設置方法を紹介している。ところが、これでは動かなかった。で、探し回っているとここに解決方法があった。

<script src=”js/lightbox.js” type=”text/javascript”></script>

この一行を </body> の直前に入れる。これで動いた!! ありがとう!

コメントを残す

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

CAPTCHA