WEBデザインスタジオ
21
Jul

jQueryを使ったズームプラグイン。ECサイトとかによさげ。jQZoom EvolutionとGalleriffic

[ EC : jQuery : webデザイン : ギャラリー ]

100729.jpg ECサイトやカタログなどのサイトにつかえそうな画像をズームできるjQueryのプラグイン。使おうかと思っていたもののなかから2つメモしておきます。

jQZoom Evolution

詳細画像を別に用意した方が親切なような気がしますが、これはそのままの大きい画像を用意するだけでズームした感じで画像を見せる事ができます、結構簡単に導入できそうです。用途は画像をズームしてディテールが見れる機能。
マウスオーバーすると枠外にズームされた画像が表示されるというプラグインになって、ズームしたい箇所をアクティブにする(?)カーソルは3パターンくらい用意されているので、お好みに合わせてつかえそうです。

100729_sample01.jpg

使い方は簡単で、JS、CSSを読み込んで、下記のようにHTMLとJavascriptを書くだけ。 DEMOでは、

  • SMALLIMAGE.JPG画像(小)335 x 251
  • BIGIMAGE.JPG画像(大)1280 x 960
を用意しています。jQeryのバージョンは1.2.6です。

<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

100729_sample02.jpg

こちらも商品紹介ページとかで多くの画像を見せたいときとかに使えそうなサムネイル付きのギャラリーが実装できるjQueryプラグインです。

フェードが気持ちいいです♪

そのほかいろいろありました
15+ jQuery Plugins to Create Stunning Image Zoom Effects

Category :

Advertisement -広告-
MoMAstore

関連記事はこちらから

google analytics のトラッキングコードが新しく «前  次 » WEBサイトの横幅は何ピクセルが適当ですか?

コメントする

ログイン情報を記憶
PAGETOP↑

SOHO WEBデザインスタジオ 写真flickr

Loading...