画像を拡大させるJavaScript「Zoomple」

JavaScriptライブラリ「jQuery」のプラグインZoompleを使用すると画像のある一部をズームさせることができます。
うまく利用すると商品の細かい部分まで閲覧者に見せることができ、コンバージョンが高まるかもしれません。
画像を拡大させるJavaScript「Zoomple」サンプル

使用方法
Zoompleからzoomple-1.3.jsを、jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="zoomple-1.3.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$('.class名').zoomple();
});
</script>

※ローダー画像とblankをダウンロードし、js内に記載した場所にアップします。
<style>
#Previewholder{
left:0;
top:0;
position:absolute;
display:none;
background:#fff;
border:1px solid #DCDCDC;
}
#Previewholder img{
display:block;
}
#Previewholder p{
margin:0;
padding:0;
font:11px Verdana,sans-serif;
color:#090808;
}
#Previewholder p span{
border-top:1px solid #ccc;
display:block;
padding:5px;
}
</style>

あとは画像をサムネイルと拡大用画像を用意して、以下のように記述します。
<a href="拡大用画像" class="class名">
<img src="サムネイル画像" alt="<span>キャプション</span>" />
</a>

また、オプションとして以下のようなものがあります。 <script language="javascript" type="text/javascript">
$(function() {
$('.class名').zoomple({
offset : {x:10,y:10}, //ズーム位置のオフセット
zoomWidth : 250, //ズーム画像の横幅
zoomHeight : 250 //ズーム画像の高さ
});
});
</script>

画像を拡大させるJavaScript「Zoomple」サンプル

sponsors

「画像を拡大させるJavaScript「Zoomple」」をシェアする

記事作成:
記事URL:

TOP > > > 画像を拡大させるJavaScript「Zoomple」