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

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

sponsors

使用方法

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>

サンプル

Title 1

キャプション 1

Title 2

キャプション 2

Title 3

キャプション 3

Title 4

キャプション 4

Title 5

キャプション 5

Title 6

キャプション 6

Title 7

キャプション 7

Title 8

キャプション 8

sponsors

Javascriptサンプルページ一覧
skuare.net