お手軽画像ズームプラグイン「jQuery plugin: Easy Image Zoom」

ECサイトなどでよく使用されるズームエフェクトをお手軽に実現するjQuery plugin: Easy Image Zoom を紹介します。
お手軽画像ズームプラグイン「jQuery plugin: Easy Image Zoom」サンプル

使用方法
jQuery plugin: Easy Image Zoom | Css Globeからファイル一式をダウンロードします。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="easyzoom.js" type="text/javascript"></script>
<script>
$(function() {
$('.class名').easyZoom();
});
</script>

次にCSSを書いていきます。
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:60px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
line-height:400px;
text-align:center;
}

※適宜変更ください。
あとはサムネイル画像に大きい画像をリンクさせれば完成です。

お手軽画像ズームプラグイン「jQuery plugin: Easy Image Zoom」サンプル

sponsors

「お手軽画像ズームプラグイン「jQuery plugin: Easy Image Zoom」」をシェアする

記事作成:
記事URL:

TOP > > > お手軽画像ズームプラグイン「jQuery plugin: Easy Image Zoom」