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

JavaScriptライブラリ「jQuery」のプラグイン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>

サンプル

<span>Shoshi - 1 months</span>
Javascriptサンプルページ一覧
skuare.net