ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

Lightboxの使い方の解説の前に

海外のチームが開発しているファイルにつき、動作保証や不具合のサポートは当サイトでは一切行っておりません。予めご了承下さい。

ダウンロードテンプレートにはLightboxパーツは入っていません。以下手順で揃えて下さい。

まず、Lightbox2サイトへ行き、「Download」と大きくイラストで作られたボタンがありますのでそちらをクリックし、ダウンロードします。解凍すると色々なファイルが梱包されていますが必要最低限のファイルだけを当テンプレート側に移動しましょう。

※2015/08時点でDLファイル名は「lightbox2-master」となっているようです。

当ページではこのバージョンを元に解説します。

必要なファイル一覧

ダウンロードファイル(lightbox2-master)のdistフォルダ内のimagesフォルダ内にある、close.pngとloading.gifとnext.pngとprev.pngの4点を当テンプレートのimagesフォルダにコピーします。

次に、distフォルダ内のcssフォルダにあるlightbox.cssを当テンプレートのcssフォルダにコピーします。
次にdistフォルダ内のjsフォルダにあるlightbox-plus-jquery.min.jsを当テンプレートのjsフォルダにコピーします。

お手元のテンプレートのhtml上部をチェック

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

という2行のタグがある場合、以前のバージョン対応用のタグなので「削除」して下さい。

続いてlightboxのcssファイルの読み込みタグが入っているかチェック

<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
※lightbox対応用テンプレートにはこのタグは入っていると思います。

新しいタグをhtml下部に追加

<script src="js/lightbox-plus-jquery.min.js"></script>
というタグをhtml側の下から3行目あたり(</body>の上ぐらい)に追加。
※既に入っている場合はこの作業は不要です。

lightboxを使うパーツのタグを修正

バージョンが変わってhtmlで使うタグも変わったようです。もし旧タイプのhtmlタグになっている場合は新タイプに変更しておいて下さい。

旧:
<a href="images_photo/IMGP2678.jpg" rel="lightbox[group0]" title="蓮の葉"><img src="images_photo/IMGP2678_mini.jpg" width="200" height="150" alt="" /></a>

新:
<a href="images_photo/IMGP2678.jpg" data-lightbox="group0" data-title="蓮の葉"><img src="images_photo/IMGP2678_mini.jpg" width="200" height="150" alt="" /></a>

■解説
data-lightbox="group0"は、画像をリンクでつなげていくかの設定です。「group0」でなくてももちろん構いません。同じ名前で揃えておけば、画像の右半分にカーソルをのせた時に次の画像へのリンク用のアイコンが出ます。名前が変わった時点で次画像へのアイコンは出なくなります。
data-title="蓮の葉"は、lightbox表示された際に写真下に表示されるテキストです。
よく分からない場合は実際に設定して動作を確認してみて下さい。

↑ PAGE TOP