prototype-uiで、簡単スライドショーの設置
ただの画像の羅列をオシャレなスライドショーにするprototype-uiライブラリ。
サンプルが公開されていなかったので、ダウンロードして設置してみました。
サンプルデモは以下に。
スライドショーのサンプル
サンプルデモ
ダウンロードと開設は以下サイトで
Simple images slider to create Flickr-like slideshows
設置は結構簡単そうですね。
html表示部は以下のように。<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/effects.js" type="text/javascript"></script>
<script src="lib/carousel.js" type="text/javascript"></script>
jQueryとは共存できなそうです。<div id="horizontal_carousel">
<div class="container">
<ul>
<li><img alt="Picture 1" src="img/img_1.jpg" /></li>
<li><img alt="Picture 2" src="img/img_2.jpg" /></li>
<li><img alt="Picture 3" src="img/img_3.jpg" /></li>
<li><img alt="Picture 4" src="img/img_4.jpg" /></li>
<li><img alt="Picture 5" src="img/img_5.jpg" /></li>
<li><img alt="Picture 6" src="img/img_6.jpg" /></li>
<li><img alt="Picture 7" src="img/img_7.jpg" /></li>
<li><img alt="Picture 8" src="img/img_8.jpg" /></li>
<li><img alt="Picture 9" src="img/img_9.jpg" /></li>
<li><img alt="Picture 10" src="img/img_10.jpg" /></li>
</ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>
</div>
関連エントリ
MacOSXデザインのウィンドウをWEBで表現するAjax導入方法
JavaScript、FLASHのイメージギャラリーまとめ15個ほど
『10のJavaScript、Ajaxタブメニュー』他、タブまとめ
横にスライドするきれいな動きのアコーディオンJavaScript
ブログでも使える画像をポラロイド風にさせるJavaScript『Instant.js』
Ajax・CSS・PHPで簡単に棒グラフが作成できる『Ajax MGraph』
Re：zapa氏 今更ですが、jQueryにはまりました