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」
関連記事
人気記事
最新記事RSS
- JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
- でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
- mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
- これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
- MVPenでアナログの良さを考え直す。
- 第3回「マネタイズHACKS」に参加してみた。
- div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
- jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
- 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
- iPhoneライクにスクロールさせるJavaScript「OverScroll」