サクサク動作する画像拡大スクリプト「Zoom.js」をWordPressで使う方法

Zoom.jsという画像を手軽に拡大表示できるjQueryライブラリを使ってみました。

これが、写真などをズーム表示するのに、サクサク軽快に動作して、操作感が気持ちよく手軽に設置できたので紹介。

↑上にある写真などを、クリックしてみると、動作感がわかります。

Zoom.jsとは

Zoom.jsデモ

Zoom.jsは、画像を手軽に拡大・縮小表示してくれるjQueryプラグインです。

以下のような操作で拡大・縮小を行います。

拡大：画像をクリック・タップ
縮小：拡大した画像をクリック・タップ、ESCキー、スクロールの開始

画像を拡大して、見終わったら、スクロールし始めると元の大きさに戻ってくれるのは、いい感じです。

通常、こういった画像効果のスクリプトは結構重かったりもするのですが、Zoom.jsは軽快に動作します。

主な手順

WordPressに設置するには、以下のような手順が必要です。

Zoom.js関連ファイルのダウンロードと設置
CSSファイルを呼び出す
JSファイルを呼び出す
IMGタグにZoom.js用の属性を付加する

特に難しいコードは、書かずに設置することができます。

Zoom.js関連ファイルのダウンロードと設置

まずは、fat/zoom.js · GitHubからZoom.jsファイルをダウンロードします。

ダウンロードしたファイルを解凍して、中にある以下のファイルを利用します。

zoom.css
zoom.js

あと、transition.jsファイルもダウンロードしておきます。

transition.js

このファイルは、アニメーションエフェクトに利用するBootstrapのファイルです。

これらの3つのファイルを、テーマフォルダ直下に以下のように配置します。

css/zoom.css
js/zoom.js
js/transition.js

これで、コードを書く前の事前準備は終了です。

CSSファイルを呼び出す

次に、ヘッダー部分にzoom.cssを呼び出すコードを記入します。

header.phpの<head></head>内に以下のコードを記入してください。

<!--子テーマで呼び出す場合-->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/zoom.css">
<!--親テーマで呼び出す場合-->
<!--<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/zoom.css">-->

親テーマで利用する場合は、コメントアウトしてある部分を利用してください。

JSファイルを呼び出す

次に、JavaScriptファイルを呼び出します。

フッターの</body>手前あたりに、以下のコードを記入してください。

<!--子テーマで呼び出す場合-->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/transition.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/zoom.js"></script>
<!--親テーマで呼び出す場合-->
<!-- <script src="<?php echo get_template_directory_uri(); ?>/js/transition.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/zoom.js"></script> -->

こちらも、親テーマで利用する場合は、コメントアウトしてある部分を利用してください。

IMGタグにZoom.js用の属性を付加する

最後に、Zoom.jsを利用するには、画像を表示するためのimg要素の属性に以下のように記入する必要があります。

<img src="sample.png" data-action="zoom">

属性に、「 data-action="zoom”」を毎回追記する必要があるわけです。

ただ、毎回Wordpressで記事を書くのに、記入するのは面倒くさいので、関数でimgタグに属性を追加する処理をfunctions.phpに書きます。

ということで、functions.phpに以下のように追記します。

//IMGタグにZoom.js表示用の属性を追加する
function add_zoomjs_property( $content ) {
  //既に適用させているところは処理しない
  if ( false !== strpos( $content, 'data-action="zoom"' ) )
     return $content;

  //IMGタグを置換
  $content = preg_replace(
    '/<img /i',//imgタグの正規表現
    '<img data-action="zoom" ',//置換する
    $content );//投稿本文（置換する文章）

  return $content;
}
add_filter( 'the_content', 'add_zoomjs_property' );

これで、投稿本文中のimgタグは、すべて「 data-action="zoom”」が付加されたものになります。

動作確認

これで、Zoom.jsの設定は完了です。

この項目にある、画像をクリックすると、気持ちよくズームイン、ズームアウトしてくれると思います。

回り込み画像と組み合わせて利用すると、ちょっとスタイリッシュに見えるかもしれません。

もちろん、回り込まない使い方でもOKです。

本文に利用されているIMGタグはすべてZoom.js表示されます。

WordPressで使用するときの注意点

僕も使ってみて気づいたのですが、Zoom.jsをWordpressで利用するには、ちょっとした注意点があります。

Zoom.jsは、以下のようにimgタグ単体のみに作用するスクリプトです。

<img src="sample.png" data-action="zoom">

なので、WordpressでよくあるAリンクで以下のように画像が囲んであると、

<a href="sample_big.png"><img src="sample.png" data-action="zoom"></a>

Zoom.jsのエフェクトが動作した後、画面がリンク先の画像に遷移してしまいます。

こんな感じに。

また、Wordpressのエディターなどは、画像自体の大きさと同じwidthとhightを設定するものがほとんどです。なので、そういう設定をした場合、Zoom.jsでズームしても、全く同じ大きさの画像が表示されることになります。

画像がズームしたように見せるには、大きめの画像をsrcに設定して、widthとheight属性などに小さめのサイズを設定してやる必要があるかもしれません。

<img src="sample_big.png"width="300" heigth="200" data-action="zoom" >

値を、計算するのは面倒なので、こんな指定でもOKだと思います。

<img src="sample_big.png" style="width: 300px; height: auto;" data-action="zoom">

ここら辺は、ちょとですが直接タグを編集する必要があるので、あまりWordpressの操作システムとの相性は良くないかもしれません。

まとめ

Zoom.jsを利用すると、imgタグのみで画像表示させている場合は、手軽にズームエフェクトを付加することができます。しかも、とても軽快に動きます。

※あらかじめ画像が全部読み込まれているから、サクサク動作するというのもあります。

ただ、ちゃんとズーム表示させて利用するには、imgタグに指定する画像サイズは、実際の画像サイズよりも小さめに設定して、実際の画像は大きなサイズを利用する必要があり、ちょっと注意が必要です。