テック

baguetteBox.jsでギャラリーを作る方法

2023年3月26日 by single コメントはまだありません

Contents

1 baguetteBox.jsでギャラリーを作る方法
2 導入方法
- 2.1 ダウンロードの場合
  - 2.1.1 コーディング方法
    - 2.1.1.1 CSSファイルインクルード
    - 2.1.1.2 JSファイルインクルード
- 2.2 CDNの場合
  - 2.2.1 コーディング方法
    - 2.2.1.1 CSSファイルインクルード
    - 2.2.1.2 JSファイルインクルード
3 実装方法
- 3.1 HTMLマークアップ
  - 3.1.1 サムネイルを設定するには？
- 3.2 baguetteBox初期化
4 画面サイズで画像切り替え（レスポンシブイメージ）
5 オプション
6 ご参考
- 6.1 関連ページ

baguetteBox.jsでギャラリーを作る方法

今回はbaguetteBox.jsを紹介します

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>baguetteBox demo(1)</title>
   <link rel="stylesheet" href="/assets/baguetteBox.js-master/dist/baguetteBox.min.css">
   <script src="/assets/baguetteBox.js-master/dist/baguetteBox.min.js"></script>
</head>
<body>
  <div class="gallery">
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" data-caption="レッサーパンダ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" alt="First image" style="width:15%" />
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" data-caption="うさぎ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" alt="Second image"  style="width:15%" />
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" data-caption="ねこ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" alt="Third image"  style="width:15%" />
      </a>
  </div>
  <script>
    window.addEventListener('load', function() {
      baguetteBox.run('.gallery');
    });
  </script>
  </body>
</html>

デモ

デモページ１

導入方法

ダウンロードの場合

GitHubのページに行き、書庫ファイルをダウンロードしてください。

GitHub(baguetteBox.js)：masterブランチ

ここでは、「master」に切り替えた後、書庫ファイルをダウンロードします。

ダウンロードした書庫ファイルを解凍すると以下のようなファイルが展開されます。

今回は「（ウェブルート）/assets/baguetteBox.js-master/」に展開しました。

適時配置ください。

コーディング方法

CSSファイルインクルード

展開した書庫ファイルの直下にある「dist」ディレクトリ配下にある、CSSファイルを読み込んでください。

<link rel="stylesheet" href="/assets/baguetteBox.js-master/dist/baguetteBox.min.css">

JSファイルインクルード

次に同じく「dist」ディレクトリにあるJSファイルを読み込んでください。

<script src="/assets/baguetteBox.js-master/dist/baguetteBox.min.js"></script>

CDNの場合

CDNの用意されています。それを利用すれば、わざわざダウンロードする必要はありません。

<CDNJS>baguettebox.js

コーディング方法

CSSファイルインクルード

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css">

JSファイルインクルード

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js"></script>

実装方法

HTMLマークアップ

まず、ギャラリーを設定したいエリアを生成します。ここでは<div>タグにて、領域を生成します。

<div class="gallery">
  ...
</div>

次に、アンカータグ（<a>）を設定し、リンク先（href）に表示させたい画像のURIを設定します。

<div class="gallery">
  <a href="(画像URI)" data-caption="(キャプション文字列)">
      ...
  </a>
  ...
</div>

キャプションを設定したい場合には、属性『data-caption』に設定してください。

または、属性『title』に設定して、同じく、キャプション文字列なります。

サムネイルを設定するには？

サムネイルを設定したい場合には、アンカータグの中にサムネイルをイメージタグ(<img>)を使用し、定義してください。

<div class="gallery">
  <a href="(画像URI)" data-caption="(キャプション文字列)">
      <img src="(サムネイル画像のURI)" />
  </a>
  ...
</div>

baguetteBox初期化

最後にbaguetteBoxを初期化し、ギャラリーを設定します。

<script>
  window.addEventListener('load', function() {
    baguetteBox.run('.gallery');
  });
</script>

loadイベントで、baguetteBoxの「run」呼び出し、baguetteBoxwを初期化します。

第１パラメータに、ギャラリーを設定したいエリアセレクタを指定します。

第２パラメータにオプションを指定することも可能です。

API run(selector, userOptions)

画面サイズで画像切り替え（レスポンシブイメージ）

サンプル

ウィンドウの内部の幅(window.innerWidth)：
CSS 解像度と物理解像度の比(window.devicePixelRatio)：
読み込み時の解像度(document.write(window.innerWidth × window.devicePixelRatio)：
解像度により表示される内容が変わります
1920以下：ネコ
1200以下：レッサーパンダ
800以下:ウサギ
600以下：カンガルー

デモ

デモページ２

HTMLコード

<div class="gallery">
  <h4>レスポンシブ</h4>
  ウィンドウの内部の幅(window.innerWidth)：<script>document.write(window.innerWidth);</script><br />
  CSS 解像度と物理解像度の比(window.devicePixelRatio)：<script>document.write(window.devicePixelRatio);</script><br />
  読み込み時の解像度(document.write(window.innerWidth × window.devicePixelRatio)：<strong><script>document.write(window.innerWidth * window.devicePixelRatio);</script></strong><br />
  解像度により表示される内容が変わります<br />
  <a href="https://www.single-life.tokyo/wp-content/uploads/2021/02/DSC06368-scaled.jpg"
      data-at-600="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg"
      data-at-800="https://www.single-life.tokyo/wp-content/uploads/2022/02/rabbit.jpg"
      data-at-1200="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06384.jpg"
      data-at-1920="https://www.single-life.tokyo/wp-content/uploads/2021/02/DSC06368-scaled.jpg">
          1920以下：ネコ<br />1200以下：レッサーパンダ<br />800以下:ウサギ<br />600以下：カンガルー
  </a>
</div>
<script>
  window.addEventListener('load', function() {
    baguetteBox.run('.gallery');
  });
</script>

アンカータグ（<a>）に、属性『data-at-{幅}』を指定すると、指定された幅を最大とした解像度まで、その画像がLightbox内で表示されることになります。

なお、最大値を超える場合にも最大時に表示される画像が表示されることになります。

サンプルだと「1920px」を超える解像度の場合でも「1920px」時の画像が表示されます。

解像度の幅の算出方法は？

ソースコードを見たところ、「window.innerWidth * window.devicePixelRatio」で算出していました。

なお、幅の算出方法は、baguetteBox初期化時に１度実行されるだけなので、画面表示後、画面サイズを変更しても、表示される画像が切り替わるようなことはありません。

オプション

Swipeboxを初期化する際にオプションを指定することができます。

サンプル

フルスクリーン

フェードイン

HTMLコード

<p>
  <h4>フルスクリーン</h4>
  <div class="gallery1">
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" data-caption="レッサーパンダ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" alt="First image" style="width:15%" />
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" data-caption="うさぎ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" alt="Second image"  style="width:15%" />
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" data-caption="ねこ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" alt="Third image"  style="width:15%" />
      </a>
  </div>
</p>
<script>
  window.addEventListener('load', function() {
    baguetteBox.run('.gallery1',{
        captions: function(element) {
          return element.getElementsByTagName('img')[0].alt;
        }
       ,buttons: false /* 次へ、前へボタン非表示 */
       ,fullScreen:true /* フルスクリーン表示 */
      }
    );
  });
</script>

<p>
  <h4>フェードイン</h4>
  <div class="gallery2">
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg" title="レッサーパンダ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  title="First image"  style="width:15%" />
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" data-caption="うさぎ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" title="Second image"  style="width:15%" />
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" data-caption="ねこ" title="ネコ">
          <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06513.jpg" title="Third image"  style="width:15%" />
      </a>
  </div>
</p>
<script>
  window.addEventListener('load', function() {
    baguetteBox.run('.gallery2',{
        noScrollbars: true /* スクロールバーを表示しない */
       ,titleTag: true  /* 代替テキストを設定 */
       ,animation : 'fadeIn' /* 効果：フェードイン */
       ,overlayBackgroundColor:'rgba(0,0,255,0.6)' /* オーバーレイ背景色 */
      }
    );
  });
</script>

デモ

デモページ３

オプション一覧

Customization

captions

キャプションの設定を有効にするオプションです。

『false』を設定すると、キャプションが設定されなくなります。

デフォルトは『true』でアンカータグ（<a>）の属性『data-caption』または『title』に設定されている文字列をキャプション領域に設定します。

また、関数も指定することができ、引数にはアンカータグ（<a>）のエレメントを持ちます。

captions: function(element) {
  return element.getElementsByTagName('img')[0].alt;
}

上記のサンプルでは、アンカータグは以下のイメージ（<img>）の属性『alt』で保持している文字列をキャプションに設定するようにしてます。

buttons

『false』を指定すると、スライドを変更するための「次へ」ボタンや「前へ」ボタンが非表示になります。ボタン非表示の場合は、キーボードの「→」「←」キーで切り替えなければなりません。

『auto』を指定すると、スマホなどのタッチデバイスや、写真が一つしかない場合、ボタンが非表示になります。

デフォルトは『true』です。

fullScreen

『true』にすると、ライトボックス表示時、フルスクリーンモードで表示されます。

デフォルトは『false』です。

noScrollbars

『true』にすると、Lightboxが表示中、スクロールバーが非表示になります。

デフォルトは『false』です。

bodyClass

Lightbox表示時、bodyに追加されるクラスを定義できるオプションです。

ignoreClass

アンカータグ（<a>）に設定されたCSSクラスで、Lightboxの対象外にするクラスを指定できるオプションです。

titleTag

『true』にすると、Lightbox表示時の画像（<Img>）のtitle属性にキャプションを設定するようになります。

async

『true』にすると、非同期で画像を読み込むようになります。

デフォルトは『false』です。

preload

事前に読み込む画像数を定義できるオプションです。

デフォルトは『2』です。

animation

Lightboxを表示する際の効果（アニメーション）を指定できるオプションです。

デフォルトは『slideIn』です。それ以外に『fadeIn』も指定できます。

また、『false』を指定することで、効果を無効化できます。

afterShow

Lightbox表示後のコールバック関数を定義できるオプションです。

afterHide

Lightboxが閉じた後に呼び出されるコールバック関数を定義できるオプションです。

onChange

Lightboxの写真が切り替わった後に呼び出されるコールバック関数を定義できるオプションです。

第１引数に、現在の表示のインデックス（添え字）、第２引数に、全体の写真数を持ちます。

overlayBackgroundColor

Lightbox表示時、背景にあるオーバーレイの背景色を定義できるオプションです。

デフォルトは『rgba(0,0,0,0.8)』です。

filter

アンカータグ（<a>）の属性『href』に紐づく画像のフィルタリングできるオプションです。

デフォルトは『/.+.(gif|jpe?g|png|webp)/i』で、GIF、JPEG、PNG、WEBP画像が対象となります。

baguetteBox.jsでギャラリーを作る方法

baguetteBox.jsでギャラリーを作る方法

サンプル

HTMLコード

デモ

導入方法

ダウンロードの場合

コーディング方法

CSSファイルインクルード

JSファイルインクルード

CDNの場合

コーディング方法

CSSファイルインクルード

JSファイルインクルード

実装方法

HTMLマークアップ

サムネイルを設定するには？

baguetteBox初期化

画面サイズで画像切り替え（レスポンシブイメージ）

サンプル

デモ

HTMLコード

解像度の幅の算出方法は？

オプション

サンプル

フルスクリーン

フェードイン

HTMLコード

デモ

オプション一覧

captions

buttons

fullScreen

noScrollbars

bodyClass

ignoreClass

titleTag

async

preload

animation

afterShow

afterHide

onChange

overlayBackgroundColor

filter

ご参考

関連ページ

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts