skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

奥から手前にズームする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型ウィジェット（ガジェット）を作る