簡単・軽量!画像ズームjQueryプラグイン「Zoom」

簡単・軽量!画像ズームjQueryプラグイン「Zoom」サンプル ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。
これを簡単・軽量なjQuery image zooming pluginが解決してくれます。

jQuery image zooming pluginからファイル一式をダウンロード。
<style>
.zoomIcon {
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(icon.png);
}
.zoom {
position:relative;
}
.zoom img {
display: block;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.zoom.js"></script>
<script>
$(function() {
$('#id名').zoom(
{ grab: true } //マウスクリック時に拡大させたい場合記述
);
});
</script>

あとは画像を下記のように記述すれば完成です。
<p id="id名" class="zoom">
<img src="画像パス" width="幅" height="高さ" />
</p>

簡単・軽量!画像ズームjQueryプラグイン「Zoom」サンプル

sponsors

「簡単・軽量!画像ズームjQueryプラグイン「Zoom」」をシェアする

記事作成:
記事URL:

TOP > > 簡単・軽量!画像ズームjQueryプラグイン「Zoom」