簡単に設置できるbaguetteBox.jsを使ってLightbox風ギャラリーページを表示する方法

簡単に設置できるbaguetteBox.jsを使ってLightbox風ギャラリーページを表示する方法をご紹介します。

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

baguetteBox.js

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。