[JS]イージングのアニメーションを伴って画像を拡大するスクリプト -jQuery Image Flyout

イージングのアニメーションを伴って画像を拡大・縮小表示するLightbox風のjQueryのプラグインを紹介します。

JQuery Image Flyout
デモページ

[ad#ad-2]

jQuery Image Flyoutの特徴

• プリローディング

  jQuery Image Flyoutではダイナミックな画像のプリローディング機能を実装しています。画像のローディング中は、ローディング用のテキスト、またはローディング用のアニメーションを利用することができます。

• イージングのアニメーション

  jQueryをはじめ、イージング用のライブラリの全てのイージングのアニメーションをサポートしています。

• フルサイズにも対応

  画像の拡大時のサイズは、画像の最大のサイズに合わせて設定するか、表示領域に合わせてサイズを調整することが可能です。

• フェードイン・アウトの対応

  画像を表示する際、フェードイン・アウトのエフェクトを利用することができます。

jQueryの対応バージョン

• jQuery 1.2.6
• jQuery 1.3.2
• jQuery 1.4.4
• jQuery 1.5

[ad#ad-2]

jQuery Image Flyoutの実装

HTML

画像はimg要素で配置し、拡大画像をa要素に指定します。

<div id="div#gallery-1" class="gallery">
<a href="image1.jpg"><img src="image1_thumb.jpg"/></a>
<a href="image2.jpg"><img src="image2_thumb.jpg"/></a>
<a href="image3.jpg"><img src="image3_thumb.jpg"/></a>
</div>

CSS

拡大時のデザインやローディング時のデザインはスタイルシートで簡単に指定できます。

スタイルシートをいろいろデザインしたデモもあります。
example3

.gallery { 
	position:relative; 
	border:1px solid #333; 
	background-color:#336699; 
	margin-top:20px;
}

.gallery a { text-decoration: none; }

.gallery img { 
	position:relative; 
	margin:20px; 
	border:1px solid #FC0; 
}

#loader {
	border:10px solid #FC0;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-moz-border-radius: 10px;
	border-radius: 10px;
}

JavaScript

「jquery.js」と「jquery.flyout-1.2.js」を外部スクリプトに指定し、下記のスクリプトを記述します。
イージングのアニメーションを使用する場合は、「jquery.easing.1.3.js」も外部スクリプトに指定します。

$('div#gallery-1 a').flyout({ 
	inOpacity:0
	fullSizeImage:true, 
	inSpeed:1000
});

スクリプトのオプション

スクリプトのオプションでは、イン・アウトのスピード、ローディング時のテキスト・画像の指定、ローダーの不透明度、画像のマージン、表示位置、表示サイズなどが設定できます。
詳しくは、下記を参照ください。
jQuery Image Flyoutのオプション