LightBoxの試用

Lightbox 2

Lightbox 2

Gallery用の画像サムネイルを作る必要があったので、

適当に調べてLightbox2とやらに行き着いた。

Webページを作り始めて二日目。

とうとうスクリプトまで来てしまった。

ので備忘録。

■ jqueryとlightboxのjsファイルを読む。

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

■ lightbox.cssも読む。

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

■ ダウンロードしたlightboxのimgフォルダにモーダル用のボタンが格納されている。

それらはlightbox.cssから直接呼び出しているので、相対関係を崩さないようにね。

1. Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.

■ それでは実装しよう。

1. single view (次へボタンがない)

<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>

2. group view

<a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a>

deta-lightbox = "name" のname部分を統一するか否かで、ページをめくるか設定できるみたい。