jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」

ECサイトなどで使用される、画像にマウスを乗せると拡大するあれ。
jQueryプラグイン「Featured Image Zoomer」で実現しましょう。

sponsors

使用方法

Featured Image Zoomerからfeaturedimagezoomer.jsをダウンロードします。
ローディング画像もありますので、必要であれば一緒にダウンロードしてください。
また、jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="featuredimagezoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
	$('#id名').addimagezoom({
		zoomrange: [3, 6], //zoomレベルを設定
		magnifiersize: [400,400], //拡大画像を表示するサイズ
		magnifierpos: 'right', //拡大画像位置
		largeimage: '/test/img/saleen.jpg' //拡大画像パス
	})
});
</script>
なお、ローディング画像はfeaturedimagezoomer.js内に記述場所があります。
あとは拡大させたい画像にidを付与すれば完成です。
<img id="id名" src="画像パス" />

サンプル

sponsors


Javascriptサンプルページ一覧
skuare.net