skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像を拡大させる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>

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

記事作成：2009年07月27日

前の記事：スライドする画像ギャラリーJavaScript「Sliding Image Gallery jQuery Plug-in」
次の記事：オンラインジェネレータ18サイトでWEBサイトを作成する