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

画像を拡大表示させるJavaScript「jQuery zoom plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ECサイトなどでは、商品画像を拡大させることがあるのではないでしょうか？
そんな時、jQuery zoom pluginを使用すると、簡単にJavaScriptで実現できます。

使用方法
Plugins | jQuery Pluginsからjquery.zooma-1.3.2.jsをダウンロードします。
またjQuery: The Write Less, Do More, JavaScript Libraryからjquery.jsも忘れずに。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zooma-1.3.2.js"></script>
<script type="text/javascript">
var started = false;
function autoZoom()
{
if (!started)
{
started = true;
var zoomImgUrl = $('#zoomImageRefContainer').find('a').attr('href');
var settings = new Object();
settings.autoDeactivate = true;
settings.zoomViewfinderName = 'zoomViewfinder';
settings.exitCallback = function() {
started = false;
};
$('div#slideshow').zooma('slideshow', 'zoomBlock', zoomImgUrl, settings).activate();
}
}
</script>

上記のようにscript部分を記述したら、以下のように画像部分を書いていきます。
<!-- サムネイル画像 -->
<div id="slideshow" class="slideshow">
<a class="cursor-pointer" onmouseover="autoZoom()">
<img src="サムネイル画像パス" />
</a>
</div>

<!-- 拡大画像 -->
<div id="zoomImageRefContainer" style="display:none;">
<a href="拡大画像パス"></a>
</div>
<div id="zoomBlock" class="zoomBlock" style="display:none; float:left;">
<div class="zoomLoading" style="display:none;">
<img src="/test/img/loading.gif" /></div>
</div>
<div id="zoomViewfinder" class="zoomViewfinder" style="display:none;"></div>
あとはCSSで調整すれば完成です。
div.zoomBlock {
margin: 0;
padding: 0;
width: 320px;
height: 240px;
border: 2px solid #CCC;
float: left;
overflow: hidden;
}

div.slideshow {
width:250px;
float:left;
align:left;
text-align:center;
}

div.zoomViewfinder {
position: absolute;
border: 1px solid black;
cursor: crosshair;
background: url(bg.png) repeat 0 0;
}

画像を拡大表示させるJavaScript「jQuery zoom plugin」サンプル

記事作成：2010年02月02日

前の記事：フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」
次の記事：パスワード強度を明示するJavaScript「Password Strength」