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

Cover Flowテイストの画像ギャラリーjavascript「My Scrap Room」

｜ ｜ ｜ ｜ ｜ ｜ ｜

iTunesにはCover Flowと呼ばれる画像の見せ方があります。
My Scrap Roomはjavascriptで使用できるようにしています。

使用方法
My Scrap Roomで使用しているjavascriptを画像ギャラリー直下に以下のように記述します。
＊長いのでMyScrap.jsとしています。
<div id="images">
<img onclick="glideTo( 0, 'i1')" src="画像パス"> //(画像位置、id名)
<img onclick="glideTo( -150, 'i2')" src="画像パス">
</div>
<div id="captionTarget" style="position:absolute;width:100%;" align="center"></div>
<div style="display:none;">
<div id="i1"><h3>Title 1</h3><p>キャプション 1</p></div>
<div id="i2"><h3>Title 2</h3><p>キャプション 2</p></div>
</div>
<script type="text/javascript" src="http://yourdomain/MyScrap.js"></script>
上記の通りid名を画像・キャプションと合わせる必要があり、さらに画像位置は-150ずつすらしてください
最後にstyleを指定します。
<style type="text/css">
img { position:absolute; width:0px; top:0px; }
</style>
Cover Flowテイストの画像ギャラリーjavascript「My Scrap Room」サンプル

記事作成：2008年01月24日

前の記事：コードを色付けるシンタックスハイライトjavascript「SHJS」
次の記事：超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」