読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

LightBoxの試用

WEB

Lightbox 2

Lightbox 2

 

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

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

 

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

 

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

 

ので備忘録。

 

jquerylightboxの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.pngloading.gifprev.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部分を統一するか否かで、ページをめくるか設定できるみたい。