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

jQueryで画像をズームさせる「Pan full size images」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ECサイトでもよく見られる、画像の詳細を拡大させて見せる手法です。
今回はJavaScriptライブラリjQueryを使用した「Pan full size images」を紹介します。

使用方法
Pan full size imagesからjquery.panFullSize.jsをダウンロードし、以下を記述します。

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.panFullSize.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("img#mypic").panFullSize(600, 450);
$("a#zoom").toggle(function(){
$("img#mypic").normalView();
},
function(){
$("img#mypic").panFullSize();
}
);
});
</script>

次に画像を下記のように記述すれば、完成です。

<a href="" id="zoom">切り替え</a>
<img src="画像パス" width="600" id="mypic" />

jQueryで画像をズームさせる「Pan full size images」サンプル

記事作成：2008年11月28日

前の記事：ECサイトに関するサイト25
次の記事：jQueryで星型投票を実現させる「Sexy Vote jQuery plugin」