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

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

sponsors

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

記事作成:
記事URL:

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