[JS]多彩なカスタマイズ、設置も簡単な画像の一部を拡大するスクリプト -Zoomy

画像の一部を拡大するスクリプトは数多くリリースされていますが、その決定版ではないか、というjQueryのプラグインを紹介します。

Zoomy
デモページ

[ad#ad-2]

• Zoomyの設置
• Zoomyのオプション

Zoomyの設置

Zoomyの設置は簡単で、ユーザビリティにも配慮されています。

使用する画像ファイル

ページに配置する画像、拡大時に使用する画像、の2枚が必要です。

外部ファイル

「jquery.js」とZoomy用のJS, CSSファイルを外部として記述します。

<link type="text/css" rel="stylesheet" href="path-to/zoom.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="path-to/jquery.zoomy0.5.min.js."></script>

HTML

2枚の画像を下記のように配置します。

displayImg.jpg

配置用の画像

zoomImg.jpg

拡大用の画像

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

JavaScript

a要素に指定したclass名は任意の名前に変更可能です。

$(function(){
    $('.zoom').zoomy();                
})(jQuery)

[ad#ad-2]

Zoomyのオプション

Zoomyのオプションでは、拡大領域のサイズの変更、形状、枠などが簡単に変更できます。
下記の「Options for Zoomy」で、それらを試すことができます。

Zoomyの多彩なオプション

Zoomyには、角丸、グラデーション、RGBaの3つの異なるCSS3のスタイルが用意されています。これらは非対応ブラウザでも同じに見えるように、使用を止めることも可能です。