今回紹介するのは、画像の一部分を虫眼鏡を通したようにズームさせるjQueryプラグイン「Zoomy Jquery Plugin」です。
ネットショップの商品紹介の画像でも使われたりする機能ですね。商品の細かい部分まで伝えることができるようになります。演出的にも面白い機能です。
サンプルを作ってみました。こちらをどうぞ。
→ jQueryプラグイン「Zoomy Jquery Plugin」サンプル
設置の仕方も簡単で、処理も軽くスムーズです。
使い方は続きをご覧ください。
まずはコチラの「Zoomy Jquery Plugin」サイトからjsファイルなど一式ダウンロードします。
同じ画像でサイズの違う大小のイメージファイルを用意しておきます。
次に<head>部分にcssファイルを指定します。パスやファイル名に注意して下さい。
|
1 |
<link type="text/css" rel="stylesheet" href="css/zoomy.css"/> |
そして</body>の直前に次のようにJavaScriptを設定して準備完了です。
|
1 2 3 4 5 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> <script type="text/javascript" src="js/zoomy.min.js"></script> <script>$(function(){ $('.zoom').zoomy(); }(jQuery))</script> |
続いて、<body>部分の画像を入れたい部分に画像のコードを追加します。
|
1 2 3 |
<a href="img/sample_zoomImg.jpg" class="zoom"> <img src="img/sample_Img.jpg" alt="こちらが表示される画像" /> </a> |
以上で虫眼鏡のように画像の一部をズームしてくれるようになります。
以下はサンプルページのソースです。ご参考までに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>虫眼鏡のように画像の一部をズームして拡大するjQueryプラグイン「Zoomy Jquery Plugin」サンプル</title> <link type="text/css" rel="stylesheet" href="css/zoomy.css"/> </head> <body> <a href="img/sample_zoomImg.jpg" class="zoom"> <img src="img/sample_Img.jpg" alt="こちらが表示される画像です。" /> </a> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> <script type="text/javascript" src="js/zoomy.min.js"></script> <script>$(function(){ $('.zoom').zoomy(); }(jQuery))</script> </body> </html> |
あわせてお読みください
Zoomooz.js Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。 画像をズームさせてギャラリー風に見せたり、テキ…
サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Sc…
最近、特に女性に人気があるPinterest（ピンタレスト）。 その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。 Pinterest（ピンタレ…
コメントを残す