小粋空間  -  a cheap joke and a play on words site

画像の一部をズームアップできるjQueryプラグイン「jqZoom」

画像の一部をズームアップできるjQueryプラグイン「jqZoom」を紹介します。

jqZoom

１．概要

Amazonをはじめとする、オンラインショッピングサイトですっかり定着した機能として、画像のズームアップがあります。商品の質感やディテールなど、念入りに確認したいときに大変重宝します。

本エントリーで紹介するプラグインを利用すれば簡単に設置することができます。

画像ズームアップのプラグインはいくつか出回っているようですが、元画像を単に拡大するものが多く、商品の質感やディテールを見せるものとしては実用的ではありません。

その中でjqZoomプラグインは、元画像と別にズームアップ用の大きな画像を用意できるので使い勝手がいいと思います。また豊富なオプションも用意されています。

２．サンプル

サンプルを作りました。

もっともシンプルなサンプル

サムネイルで切り替えられるサンプル

ということで、３項から設定方法を紹介します。

３．jqZoomプラグインのダウンロード

「jqZoom」のページ左にある「Download」をクリック。

ダウンロードのアイコンをクリック。これでファイル保存の画面が開きます。

４．jqZoomプラグインのインストール

ダウンロードアーカイブを展開して、中にある

• css/jquery.jqzoom.css
• js/jquery.jqzoom-core-pack.js（またはjquery.jqzoom-core.js）

をサーバの任意のディレクトリにアップロードします。

５．jqZoomプラグインの設定

簡単なサンプルとして、次のHTMLとCSSを用意します。car_large.jpgはズームアップ用の画像、car_medium.jpgはマウスでポイントするための少し小さい画像です。

<a href="car_large.jpg" id="image">
    <img src="car_medium.jpg" />
</a>

次にhead要素に下記のlink要素を記述します。jquery.jqzoom.cssのパスは適宜設定してください。

<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css" />

また、body終了タグの直前に下記のscript要素を記述します。jquery.jqzoom-core-pack.jsのパスは適宜設定してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.jqzoom-core.js"></script>
<script>
$(function(){
    $('#image').jqzoom();
});
</script>

jqzoomを起動する「#images」は、jqZoomプラグインを実行したい画像のa要素を指定します。

６．サムネイルで切り替えるための設定

冒頭の2つめのサンプルのようにサムネイルで切り替えられるようにするには、まず次のようなHTMLを用意します。

<div class="clearfix" style="position:relative;">
  <a href="car_large.jpg" rel="gallery" id="image" title="demo" >
    <img src="car_medium.jpg" title="triumph">
  </a>
</div>
<ul id="thumblist" class="clearfix" >
  <li>
    <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: 'car_medium.jpg',largeimage: 'car_large.jpg'}">
      <img src="car_small.jpg" />
    </a>
  </li>
  <li>
    <a href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: 'flower_medium.jpg',largeimage: 'flower_large.jpg'}">
      <img src="flower_small.jpg" />
    </a>
  </li>
  <li>
    <a href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: 'orange_medium.jpg',largeimage: 'orange_large.jpg'}">
      <img src="orange_small.jpg" />
    </a>
  </li>
</ul>

前半のdiv要素はズーム画像を表示するエリアです。「rel="gallery"」という風に、任意の値を設定したrel属性を付け加えるのがポイントです。

<div class="clearfix" style="position:relative;">
  <a href="car_large.jpg" rel="gallery" id="image" title="demo" >
    <img src="car_medium.jpg" title="triumph">
  </a>
</div>
…後略…

その次のli要素（抜粋）に、a要素とimg要素を使ってサムネイル画像を指定します。

<ul id="thumblist" class="clearfix" >
  <li>
    <a href="javascript:void(0);" rel="{gallery:'gallery', smallimage:'car_medium.jpg', largeimage:'car_large.jpg'}">
      <img src="car_small.jpg" />
    </a>
  </li>
  …後略…

img要素にサムネイル画像を指定します。またa要素のhref属性には「javascript:void(0);」を設定し、rel属性の中にハッシュ形式で、次の3つを指定します。

• gallery：前述のa要素のrel属性値
• smallimage：マウスポイント用画像
• largeimage：ズーム用画像

この設定を行うことでサムネイルをクリックしたときに画像が切り替わります。

また、選択されたサムネイルのa要素にはclass属性「zoomThumbActive」が付与されるので、CSSで装飾するとよいでしょう。

    <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery:'gallery', smallimage:'car_medium.jpg', largeimage:'car_large.jpg'}">
      <img src="car_small.jpg" />
    </a>

７．オプション

zoomType：ズームタイプを設定します。デフォルトは「standard」で、他に「reverse（レンズ部分を透過）」「drag（クリックしてドラッグ）」「innerzoom（画像内でズーム）」があります。

$(function(){
    $('#image').jqzoom({
        zoomType: 'reverse'
    });
});

zoomWidth：ズームエリアの幅を指定します（デフォルトは300）。指定した幅にあわせてマウスポイントエリアの幅も変化します。

$(function(){
    $('#image').jqzoom({
        zoomWidth: 200
    });
});

zoomHeight：ズームエリアの高さを指定します（デフォルトは300）。指定した高さにあわせてマウスポイントエリアの高さも変化します。

$(function(){
    $('#image').jqzoom({
        zoomHeight: 150
    });
});

xOffset：マウスポイントエリアとズームエリアのX軸方向のオフセットを設定します（デフォルトは10）。大きい値を設定するとマウスポイントエリアとズームエリアが離れます。

$(function(){
    $('#image').jqzoom({
        xOffset: 10
    });
});

yOffset：マウスポイントエリアとズームエリアのY軸方向のオフセットを設定します（デフォルトは0）。大きい値を設定するとマウスポイントエリアとズームエリアがずれて表示されます。

$(function(){
    $('#image').jqzoom({
        yOffset: 10
    });
});

position：マウスポイントエリアを起点としたズームエリアの位置を「right」「left」「top」「bottom」で指定します（デフォルトは「right」）。

$(function(){
    $('#image').jqzoom({
        position: 'left'
    });
});

preloadImages：「true」を設定すれば、ズームエリア画像を事前にロードします（デフォルトはtrue）。

$(function(){
    $('#image').jqzoom({
        preloadImages: true
    });
});

preloadText：ロード時のテキストを指定します。

$(function(){
    $('#image').jqzoom({
        preloadImages: true,
        preloadText: 'Loading zoom'
    });
});

title：「true」を設定すれば、ズーム画像の上部にタイトルを表示します。タイトル用のテキストはa要素のtitle属性から取得します（デフォルトはtrue）。

$(function(){
    $('#image').jqzoom({
        title: false
    });
});

lens：「false」を設定すれば、マウスポイントエリアのレンズを非表示にします。

$(function(){
    $('#image').jqzoom({
        lens: false
    });
});

imageOpacity：zoomTypeで「reverse」を設定したときに、レンズ部分以外の透過度を設定します（デフォルトは0.4）。

$(function(){
    $('#image').jqzoom({
        zoomType: 'reverse',
        imageOpacity: 0.5
    });
});

showEffect：「fadein」を設定すれば、ズーム画像をフィードインで表示します（デフォルトは「show」）。

$(function(){
    $('#image').jqzoom({
        showEffect: 'fadein'
    });
});

hideEffect：「fadeout」を設定すれば、ズーム画像をフィードアウトで非表示にします（デフォルトは「hide」）。

$(function(){
    $('#image').jqzoom({
        hideEffect: 'fadeout'
    });
});

fadeinSpeed：showEffectで「fadein」を設定したときのフェードインのスピードを指定します。

$(function(){
    $('#image').jqzoom({
        showEffect: 'fadein',
        fadeinSpeed: 'slow'
    });
});

fadeoutSpeed：hideEffectで「fadeout」を設定したときのフェードアウトのスピードを指定します。

$(function(){
    $('#image').jqzoom({
        hideEffect: 'fadeout',
        fadeoutSpeed: 1500
    });
});