画像の一部を拡大させるjQueryプラグイン

画像の一部を虫眼鏡のように拡大表示させるjQueryプラグインのご紹介です。

jQueryプラグイン「Zoomy Jquery Plugin」

ネットショップサイトでの商品紹介やスマホサイトで活躍してる"あれ"ですね。

See the Pen
QWpLYYd by Saki (@SAKI)
on CodePen.

使い方

ダウンロード

プラグインサイトよりダウンロードします。
http://zoomy.me/home
Zoomy Jquery Plugin (GitHub)
Zoomy Jquery Plugin

※jQueryも必要です。

設置

zoomyのcss,jsとjQueryを読み込むだけ。

HTML<link type=text/css href="zoomy.css" rel=stylesheet>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js></script>
<script src=zoomy.js></script>

HTML<a class="zoom" href="sample.jpg"><img src="sample-thumbnail.jpg" alt="image"></a>

JS$(function(){
$('.zoom').zoomy({
zoomSize: 256,
round: true,
border:'6px solid #fff'
});
});