[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
Post on:2010年10月4日
sponsors
フェードや回転を使ったスムーズなアニメーションで画像を拡大表示するスクリプトを紹介します。
[ad#ad-2]
imgZoomの主な特徴
- lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ）
- CSS/HTMLベースでのカスタマイズ
- フェードや回転のアニメーションで画像を拡大
- ズームイン、ズームアウトのAPIの提供
- jQueryのプラグインとして動作する軽量（7KB）スクリプト
imgZoomの実装方法
外部ファイル
下記の3ファイルを外部ファイルとして記述します。
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.imgzoom.pack.js"></script> |
HTML
class名に「thumbnail」を記述し、拡大用の画像はa要素に指定します。
※class名は変更可能です。
|
1 2 |
<a href="puppy.jpg"><img class="thumbnail" src="puppy_small.jpg" alt="Puppy" /></a> <a href="kitten.jpg"><img class="thumbnail" src="kitten_small.jpg" alt="Kitten" /></a> |
JavaScript
HTMLで記述したclass名「thumbnail」を指定します。
※class名は変更可能です。
|
1 2 3 |
$(document).ready(function () { $('img.thumbnail').imgZoom(); }); |
[ad#ad-2]
imgZoomのオプションとカスタマイズ
オプション
スクリプトのオプションでは、使用するclass名、アニメーションの時間、フェード時の不透明度、回転の有無、ローディング時の画像、オーバーレイの不透明度、titleによる説明文の表示などが設定できます。
カスタマイズ
拡大時に使用されているフレームはCSSベースでカスタマイズが可能です。フレームは下記のような構造になっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="imgzoom-wrap imgzoom-width"> <div class="imgzoom-container imgzoom-width imgzoom-height"> <a href="#" class="imgzoom-prev"><span>Prev</span></a> <a href="#" class="imgzoom-next"><span>Next</span></a> </div> <div class="imgzoom-counter"> <span class="imgzoom-current" />&;nbsp;of&;nbsp; <span class="imgzoom-last" /> </div> <div class="imgzoom-title" /> <div class="imgzoom-close">Close</div> </div> |
オプションやカスタマイズの詳細は下記ページを参照ください。
imgZoom Documentation
sponsors
