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

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

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

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

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

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

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

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

スポンサーリンク
レクタングル(大)広告

baguetteBox.jsとは

baguetteBox.js Demo

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

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

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

パソコンでbaguetteBox.jsを利用した場合

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

スマホ(縦型)でスワイプ動作

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

baguetteBox.jsを実装する手順

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

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

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

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

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

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

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

baguetteBox.jsのダウンロード

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

baguetteBox.js-dev.zip

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

distフォルダをテーマフォルダ直下に移動する

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

テーマフォルダ直下にdistフォルダを多く

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

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

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

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

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

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

WordPress的な書き方

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

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

コンテンツ部分を書く

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

投稿管理画面からbaguetteBox.jsを利用する画像を挿入する

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

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

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

動作確認

あとは、投稿ページで以下のように表示された画像をクリックしてみます。

baguetteBox.jsの動作テスト用画面

すると以下のように、ちゃんと動作しました。

baguetteBox.jsの動作チェック

まとめ

こんな感じで、baguetteBox.jsは、スクリプトファイルを呼び出し、画像が包括されているラップ要素をコードで指定してやるだけで、簡単に実装することができます。

Lightboxや、Lityでは、PHPなどでソースコードを置換し属性を付加してやる必要があったので、それと比較すると、かなり楽に実装できます。正規表現とかを使う必要がないので。

今回は、画像を手軽にギャラリー表示できるLightboxというjQueryプラグインをWordpressテーマでカスタマイズして利用する...
僕はこれまで、画像拡大するjQueryライブラリはLightboxを使っていました。 Lightboxは、手軽に使えて...

スワイプ操作もできて、軽快に動き、実装も簡単、とLightbox系プラグインの中では、ほんと三拍子そろった良いプラグインだと僕は思います。

参考 baguetteBox.js