jQueryで画像をズームさせる「Pan full size images」
[ 1分で読めて簡単導入できます]
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日
