jQzoom Touch - Javascript Image magnifier

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

デモ

1.基本 -Standard- 2.ドラッグ操作 -Drag- 3.拡大表示を常に表示 -Always on zoom- 4.インライン拡大 -Inner zooom- 5.サイズや位置を変更 -Reposition-

使い方

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です。

ライセンス

Copyright © 2012 creatorish.com

作者

creatorish yuu
Weblog: http://creatorish.com
Facebook: http://facebook.com/creatorish
Twitter: http://twitter.jp/creatorish