21
Jul
Jul
jQueryを使ったズームプラグイン。ECサイトとかによさげ。jQZoom EvolutionとGalleriffic
[ EC : jQuery : webデザイン : ギャラリー ]
ECサイトやカタログなどのサイトにつかえそうな画像をズームできるjQueryのプラグイン。使おうかと思っていたもののなかから2つメモしておきます。
jQZoom Evolution
詳細画像を別に用意した方が親切なような気がしますが、これはそのままの大きい画像を用意するだけでズームした感じで画像を見せる事ができます、結構簡単に導入できそうです。用途は画像をズームしてディテールが見れる機能。
マウスオーバーすると枠外にズームされた画像が表示されるというプラグインになって、ズームしたい箇所をアクティブにする(?)カーソルは3パターンくらい用意されているので、お好みに合わせてつかえそうです。
使い方は簡単で、JS、CSSを読み込んで、下記のようにHTMLとJavascriptを書くだけ。 DEMOでは、
- SMALLIMAGE.JPG画像(小)335 x 251
- BIGIMAGE.JPG画像(大)1280 x 960
<script type='text/javascript' src='js/jquery-1.2.6.js'> <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'>
$(document).ready(function(){
$('.MYCLASS).jqzoom();
});
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a>
demo
ズームのタイプやカーソルの大きさ、POPUPの場所などのオプションを設定できるみたいです。
Galleriffic
こちらも商品紹介ページとかで多くの画像を見せたいときとかに使えそうなサムネイル付きのギャラリーが実装できるjQueryプラグインです。
フェードが気持ちいいです♪





コメントする