簡単に設置できるbaguetteBox.jsを使ってLightbox風ギャラリーページを表示する方法をご紹介します。
Contents
ディスプレイ広告
baguetteBox.jsを使ってLightbox風ギャラリーページを表示するCSS記述
※baguetteBox.cssファイルを読み込みます。ギャラリー表示エリア(.gallery)のCSS記述です。必要に応じて変更して下さい。
<link rel="stylesheet" href="baguetteBox.css"> <style> * { padding: 0; margin: 0; } body { font-weight: bold; font-size: 20px; text-align: center; } h1{ text-align: center; font-size: 20px; padding: 20px 0 40px 0; line-height: 1.8em; } .gallery img { height: 100%; } .gallery a { width: 240px; height: 180px; display: inline-block; overflow: hidden; margin: 4px 6px; box-shadow: 0 0 4px -1px #000; } </style>
baguetteBox.jsを使ってLightbox風ギャラリーページを表示するHTML記述
※ギャラリー表示エリア(class=”baguetteBoxOne gallery”)内に画像(1.jpg、2.jpg、3.jpg)を用意します。
<h1>baguetteBox.jsを使ってLightbox風ギャラリーページを表示してます。<br>以下のサムネイルをクリックしてみて下さい。</h1> <div class="baguetteBoxOne gallery"> <a href="1.jpg" data-caption="画像1"><img src="1.jpg" alt="画像1"></a> <a href="2.jpg" data-caption="画像2"><img src="2.jpg" alt="画像2"></a> <a href="3.jpg" data-caption="画像3"><img src="3.jpg" alt="画像3"></a> </div>
簡単に設置できるbaguetteBox.jsを使ってLightbox風ギャラリーページを表示するJavaScriptの記述
※baguetteBox.jsファイルを読み込みます。baguetteBox.run(‘ギャラリー表示エリア’)を記述します。
<script src="baguetteBox.js" async></script> <script> window.onload = function() { baguetteBox.run('.baguetteBoxOne'); }; </script>
baguetteBox.jsを使ってLightbox風ギャラリーページを表示するデモページ
baguetteBox.jsを使ってLightbox風ギャラリーページを表示するデモページ
ソース元:baguetteBox.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。