画像ポップアップとスワイプ可能なプラグイン「baguetteBox.js」

サイト制作に際して、画像クリックで拡大表示されるいわゆる「lightbox」系のプラグインを探していました。他にも「画像をスワイプ可能」など希望要件が色々ありまして、色々探しながら比較してみたのです。

そして辿り着いたのが、今回ご紹介する「baguetteBox.js」です。これ素晴らしいプラグインですね。

baguetteBox.jsとは
baguetteBox.jsの導入方法

baguetteBox.jsとは

baguetteBox.jsとは、画像をクリックした時に拡大表示するいわゆるlightbox系のプラグインです。以下の公式デモページを見ていただければ、大よその機能が分かると思います。

LINK

baguetteBox デモページ

数あるlightbox系プラグインの中でbaguetteBox.jsを選んだのは、以下の理由からです。

スワイプ可能

画像を特定のクラスでまとめて、スライドショーのように拡大画面でスワイプすることが可能です。画像がメインコンテンツとなるサイトだったので、この機能は嬉しいです。

画像が画面一杯に広がる

baguetteBox.jsは特に設定を変えずとも、拡大画像が画面一杯（あるいは元の画像サイズ）に広がってくれます。折角拡大表示するんだから、画面一杯に広がって欲しかったんですよね。

拡大処理が簡潔で早い

拡大描写に凝った処理をするプラグインも多いのですが、あれユーザーの利便性とトレードオフになっていると思うんですよね。その点baguetteBox.jsの描写は簡素で高速なのが素晴らしいです。

拡大画面に文字が入れられる

baguetteBox.jsは拡大画面の最下段に文字を入れることが出来ます。簡素な内容ではありますが、あるのと無いのではユーザーが受ける印象も違ってきますからね。

jQueryいらず

後で気付いたんですが、これjQueryの読み込み要らないんですね。私のサイトは他の処理で読み込んでいるのであまり関係ありませんでしたが、読み込み不要なサイトであれば速度の向上が望めます。

baguetteBox.jsの導入方法

まずGitHubからプラグイン一式をダウンロードして展開しましょう。

LINK

GitHub baguetteBox

必要なのはdistフォルダに入っている.jsと.cssの2ファイルのみです。通常のファイルと、改行とスペースを取り除いて最小サイズにしたminファイルが用意されているので、好きな方を使いましょう。

CSSはheadタグで、JavaScriptはbodyタグ終了直前で読み込むのが良いでしょう。そしてJavaScriptを読み込んだ後に、任意のクラスでbaguetteBoxを実行する記述をします。以下はgalleryクラスでの起動を前提としたものです。



  window.onload = function() {
    baguetteBox.run('.gallery');
  };

これで準備は完了で、後はHTMLに記述して使うだけです。拡大画像とサムネイル画像は、別でも同一でも問題ありません。

<div class="gallery">
  <a href="拡大画像のURL" data-caption="拡大時に表示したい文字">[eyecatch "サムネイル画像のURL" "画像の説明"]</a>
  <a href="拡大画像のURL">[eyecatch "サムネイル画像のURL" "画像の説明"]</a>
</div>

以上、baguetteBox.jsの紹介でした。とても素晴らしいプラグインですね。

B!
LINE