奥から手前にズームするJavaScript「Spacegallery.js」

最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。
今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。
奥から手前にずんずんとズームしながら画像を表示していきます。

使用方法
Spacegallery.jsのDownLoadからファイル一式をダウンロードします。
あとは以下を記載します。
<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>
<script>
$(document).ready(function(){
$('#myGallery').spacegallery({loadingClass: 'loading'});
});
</script>
※spacegallery.cssはcustom.cssと合わせてしまっています。
後はズームさせたい画像は以下のように指定します。
<div id="myGallery" class="spacegallery">
<img src="画像パス" alt="" />
<img src="画像パス" alt="" />
<img src="画像パス" alt="" />
<img src="画像パス" alt="" />
</div>

奥から手前にズームするJavaScript「Spacegallery.js」サンプル

2008年07月14日

前の記事：amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
次の記事：Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る

関連記事

• [jQuery]Galleria
• [jQuery]ScrollShow
• [jQuery]slideViewer
• [jQuery]jqGalViewIII
• エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」

• JavaScriptライブラリ「mootools」で3Dぐるぐるさせる
• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」