【jQuery】 Lightboxを使う
準備
- LightBoxからプラグインをダウンロードしてくる。
- 解凍して、任意のフォルダに移動。
- lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する。
例：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Lightbox</title> <meta name="description" lang="ja" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="img/avicon.png"> <link rel="stylesheet" href="css/screen.css"> <link rel="stylesheet" href="css/lightbox.css"> </head> <body> <section id="examples" class="examples-section"> <div class="container"> <h2>Examples</h2> <h3>Two individual images</h3> <div class="image-row"> <a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a> <a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/image-2.jpg" alt="image-1"/></a> </div> <hr /> <h3 style="clear: both;">Four image set</h3> <div class="image-row"> <div class="image-set"> <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a> <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a> <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a> <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a> </div> </div> </div> </section> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/lightbox.js"></script> <script> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-2196019-1']); _gaq.push(['_trackPageview']); </script> </body> </html>
結果：
画像をURLを変更してみる
画像URLを変更するだけでサムネイルも変更されます。LightBox側が元画像を自動的に縮小してくれます。なので、どんな大きさの画像でも対応しています。変更箇所：
<h3>Two individual images</h3> <div class="image-row"> <a class="example-image-link" href="img/halloween.jpg" data-lightbox="example-1"><img class="example-image" src="img/halloween.jpg" alt="image-1" /></a> <a class="example-image-link" href="img/natsu.png" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/natsu.png" alt="image-1"/></a> </div>
結果：
サムネイル画像の大きさを変更
サムネイル用に表示される画像の大きさを変更します。screen.cssにサムネイルの大きさを指定してあるプロパティがあるので変更します。変更箇所[screen.css]
.example-image{width:17rem;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}
結果：
画像のグループ化
画像をグループ化することでLightBox化した時、次の画像へ移動させるボタンを表示させることが出来ます。画像をグループ化させるには、a要素内の「data-lightbox」属性の値にグループ名を入れます。
例：
<h2>Examples</h2> <h3>Two individual images</h3> <div class="image-row"> <a class="example-image-link" href="img/halloween.jpg" data-lightbox="halloween"><img class="example-image" src="img/halloween.jpg" alt="image-1" /></a> <a class="example-image-link" href="img/natsu.png" data-lightbox="halloween" data-title="Optional caption."><img class="example-image" src="img/natsu.png" alt="image-1"/></a> </div>
結果：
下のグループと違う値にしているので、それぞれグループ化されています。
