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

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

sponsors

使用方法

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;
}

サンプル

small

Javascriptサンプルページ一覧
skuare.net