jQzoom Touch - Javascript Image magnifier

画像の一部を拡大表示できるjQueryプラグイン「jqZoom」をタッチデバイス対応にしたもの

デモ

jqZoom Evolutionとまったく同じです。

CSSをhead内で読み込みます。

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

jQueryとjqZoomを読み込みます。

<script type='text/javascript' src='js/jquery-x.x.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>

拡大したい箇所を以下のようにマークアップします。

<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
    <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>

aタグのhrefに拡大後の画像、imgタグに拡大前の小さい画像を指定します。
そしてお決まりのｊQueryプラグインの記述を追加します。

$(document).ready(function(){
    $('.MYCLASS').jqzoom();
});

オプション等は本家のサイトを参照してください。
jqZoom Evolution

既にjqZoomを導入している場合はそのままJSを上書きするだけでOKです。