虫眼鏡 jQueryのプラグイン『Zoomy』

画像の一部を拡大するスクリプトはたくさんありますが、そのなかでもよさそうな
jQueryのプラグイン、『Zoomy』を紹介します。

Zoomy
デモページ

Zoomyの設置は比較的簡単です。

使用する画像ファイル

ページに配置するもとの画像（50%）、拡大時に使用する画像（100%）、
の2枚の画像が必要です。

外部ファイルの設置（blogger テンプレート > HTML編集）

「jquery.js」とZoomy用のJS, CSSファイルを外部ファイルとして
</head>タグの前に記述します。

jQuery > download
zoomy.js > download
 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/1277583/zoomy.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/1277583/zoomy.min.js' type='text/javascript'/> <style type='text/css'> @import url(http://dl.dropbox.com/u/1277583/zoomy.css);     </style> <link href='css/zoomy.css' rel='stylesheet' type='text/css'/> </head>

HTML（blogger 投稿ページ）

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

displayImg.jpg　もとの画像

zoomImg.jpg　拡大用の画像

 

<script src="http://dl.dropbox.com/u/1277583/zoomy.min.js" type="text/javascript"></script>

<a class="zoom" href="displayImg.jpg"><img src="zoomImg.jpg" /></a>

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

JavaScript （画像の記述の下に記述します）

<script type="text/javascript">
$(function(){
    $('.zoom').zoomy('mouseover',
        {
            clickable: true,
            attr: 'rel' 
        }
    );              
}(jQuery));
</script>

これで完了。

Zoomyのオプション

Zoomyのオプションでは、拡大領域のサイズの変更、形状、枠などが簡単に変更できます。
下記の「Options for Zoomy」で、それらを試すことができます。
（※現在は掲載されてないようです） 

 


Zoomyの多彩なオプション

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

sample