http://www.antytle.com/js-plugin/lightbox2

※スマホチェック時、サーバーでは機能するが、ローカルでは機能しない。padはOKだが、スマホのローカルでは動かないので心配しないように。

圧縮フォルダを解凍し、lightbox > jsフォルダの中にある「lightbox.min.js」を選択して、各自のディレクトリにコピーします。このファイルがLightbox2を動作させ るメインプログラムで、フェードやレスポンシブ、前へ/次へボタンなどの機能が詰まっています。

ightbox > cssフォルダの中にある「lightbox.css」を選択して、各自のディレクトリにコピーします。これはlightbox2のデザインを担うファイルで、背景色や画像枠線などをここで指定しています。

 

ightbox > imgフォルダの中の「close.png」「loading.gif」「next.png」「prev.png」を各自のディレクトリにコピーします。この画像ファイルはLightbox2の部品となります。

 

タグの追加

「lightbox.css」をheadタグ内に追加します。href属性のファイル指定は各自のディレクトリに合わせてください。

 

HTML

1	<link href="lightbox.css" rel="stylesheet">

jQueryを導入します。以下のコードを</body>の直前に追加します。

 

HTML

1	<script src="http://code.jquery.com/jquery.min.js"></script>

「lightbox.min.js」を「jquery.min.js」の直後に追加します。src属性のファイル指定は各自のディレクトリに合わせてください。

 

HTML

1	<script src="lightbox.min.js"></script>

 

Lightbox2の適用方法

テキストや画像タグを以下のようなaタグで囲むだけです。

 

HTML

1 2 3 4

<!--▼テキストに適用▼--> <a href="image1.jpg" data-lightbox="image1" data-title="画像タイトル">ここをクリック！</a> <!--▼サムネイルに適用▼--> <a href="image2.jpg" data-lightbox="image2" data-title="画像タイトル"><img src="thumb.jpg"></a>

• data-lightbox – クリックされたらLightbox2を起動させるための属性。グループ名としての役割。
• data-title – 拡大画像の下に画像のキャプションを表示。

ただし、該当html内に　設置すること。なんかうまくパス通らないから。

lightbox2-master/dist 　　distを設置。

例　kawarart/chips/dist    

head内に　<link rel=”stylesheet” href=”./dist/css/lightbox.css”>

bodyへ
<script src=”./dist/js/lightbox-plus-jquery.min.js”></script>

 

該当画像へ
<a href=”../image/chip/01b.jpg” data-lightbox=”group1″><img src=”../image/chip/01.jpg” ></a>

”data-lightbox”がスクリプトと関連される。

data-lightbox=”group1“　はグループ化できる。

 

lightbox.css の画像のパスの合わせて設定する。

カワラートの瓦チップページで使用。