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

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

使用方法
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」サンプル

sponsors

「Cover Flowテイストの画像ギャラリーjavascript「My Scrap Room」」をシェアする

記事作成:
記事URL:

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