スワイプ対応の画像ポップアップを実装できるJavaScriptプラグイン「baguetteBox.js」。WordPressでの使い方。

サイト上の画像をクリックしたとき、ズーム表示できると何かと便利な時があります。

僕はこれまで、そういった画像ズームポップアップエフェクトを実装する時は、LightboxもしくはLityなどを利用してきました。

Lightboxは、画像ポップアップ系のJavaScriptプラグインの中でも有名で、ギャラリー表示などにも対応しています。

ただ、Lightboxはギャラリー表示したときに、動作も比較的重めですし、スマホのスワイプ動作には対応していません。

なので、「何か良いJavaScriptプラグインはないか？」と以下の条件で探してみました。

スマホでギャラリー表示したときにスワイプで画像を閲覧できる
なるべく動作が軽い
出来る限り簡単に実装できる

上記条件で、JavaScriptプラグインをいろいろ試してみた結果、baguetteBox.jsというピュアJavaScriptプラグインが、「スマホ対応」、「動作が軽快」、「実装が簡単」という観点から、最も優れているように感じたので、使用方法をメモがてら紹介です。

baguetteBox.jsとは

baguetteBox.jsは、手軽に利用することが出来るシンプルなLightbox系プラグインです。スクリプトはすべてピュアJavaScriptで書かれており、レスポンシブ対応もされています。

と言葉で説明するよりも、実際のデモページで動作を見てもらった方が、イメージがつかめるかと思います。

パソコンだと、こんな感じで動作します。

モバイルだと、こんな感じでスワイプ操作も可能です。

もちろん、スマホを横向きにしても利用できます。

baguetteBox.jsを実装する手順

baguetteBox.jsを実装するには、主に以下の手順が必要となります。

baguetteBox.jsのダウンロード＆設置
スクリプトファイルの呼び出し＆実行コードの記入
コンテンツ部分を書く

baguetteBox.jsは、僕がこれまで試したことがあるLightbox系プラグインの中では、実装がかなり簡単な部類に入ります。というか、一番簡単かも。

以下では、Wordpressテーマに実装する方法を紹介したいと思います。

baguetteBox.jsのダウンロード＆設置

まずは、baguetteBox.jsのダウンロードを行います。

ダウンロードは、GitHubからダウンロードする必要があります。

ダウンロードしたzipファイルを解凍（展開）します。

解凍して出てきたフォルダの中の「dist」フォルダのみを利用します。

「dist」フォルダをテーマ（子テーマ）フォルダ直下にコピペします。

利用するファイルとしては、「dist」フォルダの中にある以下のファイル2つを利用します。

テーマフォルダ/dist/baguetteBox.min.css
テーマフォルダ/dist/baguetteBox.min.js

スクリプトファイルの呼び出し＆実行コードの記入

次に、テーマフォルダ内に置いたスクリプトファイルを呼び出します。

手軽に実装するのであれば、Wordpressテーマの<head></head>内に以下のようにコードを書くだけです。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/dist/baguetteBox.min.css">
<script src="<?php echo get_template_directory_uri(); ?>/dist/baguetteBox.min.js" async></script>
<script type="text/javascript">
window.onload = function() {
  baguetteBox.run('.entry-content');
};
</script>

子テーマ側で実装する場合は、get_template_directory_uri関数をget_stylesheet_directory_uri関数に変更してください。

baguetteBox.runに指定したHTMLクラス名（.entry-content）は、baguetteBox.jsで表示したい画像を包括したHTML要素（ラップ要素）を指定してください。Wordpress公式テーマの場合は、大抵の場合.entry-contentが本文部分に指定されているので、今回はそれを利用しました。

WordPress的な書き方

WordPressの作法に、ある程度添った書き方をするのであれば、以下のようにfunctions.phpに貼り付けても良いかと思います。

///////////////////////////////////
//baguetteboxの呼び出し
///////////////////////////////////
function call_baguettebox_scrips_demo() {
    //baguettebox CSSの呼び出し
  wp_enqueue_style( 'baguettebox-style', get_template_directory_uri() . '/dist/baguetteBox.min.css' );
  //baguetteboxスクリプトの呼び出し
  wp_enqueue_script( 'baguettebox-js', get_template_directory_uri() . '/dist/baguetteBox.min.js', array(), false, true  );
  //実行コードの記入
  $data = "
        window.onload = function() {
          baguetteBox.run('.entry-content');
        };
  ";
  wp_add_inline_script( 'baguettebox-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_baguetteBox_scrips_demo' );

こちらも、子テーマで利用する際はget_stylesheet_directory_uri関数に変更してください。

コンテンツ部分を書く

あとは普通に、Wordpress投稿管理画面から、以下のようにリンク付き画像タグを挿入します。

HTMLのソースコードで言うと、以下のような構造になります。

<div class="entry-content">

  <a href="拡大画像のURL">
    <img src="サムネイル画像のURL" />
  </a>

  <a href="拡大画像のURL">
    <img src="サムネイル画像のURL" />
  </a>

</div><!-- .entry-content -->

.entry-contentクラスは、通常テーマ内に組み込まれているので記入する必要ありません。

ただ、Wordpress投稿の本文部分が.entry-contentクラスで囲まれていない場合は、テーマの構造に合わせたラップ要素のCSSセレクターを記入する必要があります。