木曜日, 3月 14, 2013

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

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



Zoomy
デモページ

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

使用する画像ファイル

ページに配置するもとの画像(50%)、拡大時に使用する画像(100%)、
の2枚の画像が必要です。
外部ファイルの設置(blogger テンプレート > HTML編集)

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