JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」

amazonのように画像を・・・、でももっと綺麗に表示させて・・・
というわがままな願いを、prototypeでかなえてくれるJavaScript「showcase」を紹介します。
JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」サンプル

使用方法 showcaseからファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="http://yourdomain/showcase.css" />
<script type="text/javascript" src="http://yourdomain/prototype.js"></script>
<script type="text/javascript" src="http://yourdomain/effects.js"></script>
<script type="text/javascript" src="http://yourdomain/showcase.js"></script>
次に表示させたい画像を以下のように記述します。
<div class="showcase" id="horizontal">
<a href="#previous" class="controls previous" rel="previous">–</a>
<a href="#next" class="controls next" rel="next">+</a>
<ul>
<li><a href="#" ><img src="画像パス" /></a></li>
//画像分
</ul>
</div>
最後に以下のscriptを書き、完成です。 <script type="text/javascript">
document.observe('dom:loaded', function () {
new Showcase.Horizontal($$('#horizontal ul li'), $$('#horizontal a.controls'), {duration: 0.3});
});
</script>
※対応させたいidなどはscript内で調整可能です。
JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」

sponsors

「JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」