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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

amazonのように画像を・・・、でももっと綺麗に表示させて・・・
というわがままな願いを、prototypeでかなえてくれるJavaScript「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」

記事作成：2008年10月20日

前の記事：モバイルサイトに関するサイト19
次の記事：タイムテーブルを作るJavaScript「today's timetable」