WEB制作のメモ帳

2011-05-24

jquery

多くの画像を効果的に見せることができるスライドショー。
ギャラリーサイトでよく見かけますし自分自身も利用しているのですが、基本はサムネイルは横並び。
そんな中、サムネイルを縦に表示できるものを見つけたのでメモ。

■使用するスクリプト
slideshow.js
http://www.electricprism.com/aeron/slideshow/
mootools.js
http://mootools.net/

SOURCE

■HTML
<!-- スライドショー表示部分 -->
<div id="show" class="slideshow">
<!-- ローディング画像 -->
<img src="lightpop-ico-loading.gif" width="32" height="30" style="position:relative; top:150px; left:190px">
</div>

■CSS
.slideshow{
display:block;
position:relative;
z-index:0;
}

■JAVASCRIPT
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = ['sample02_1.jpg', 'sample02_10.jpg', 'sample02_11.jpg', 'sample02_12.jpg', 'sample02_13.jpg', 'sample02_14.jpg', 'sample02_2.jpg', 'sample02_3.jpg', 'sample02_4.jpg', 'sample02_5.jpg', 'sample02_6.jpg', 'sample02_7.jpg', 'sample02_8.jpg', 'sample02_9.jpg'];
//スライドショーで表示する画像ファイル名

var myShow = new Slideshow('show', data, {controller: true, //オンマウスでコントロールパネル表示
height: 300, //スライドショー高さ
hu: 'http://sample.com/', //画像(サムネイルも同じ)のある場所のパスを入れる
thumbnails: true, //サムネイル表示
width: 400 //スライドショー幅
});
});
//]]>
</script>

参考サイト

縦にサムネイルがスライドするスライドショーmooSlideShow2 (moootools )-稀によくあるブログ
http://dispersalblog.blog90.fc2.com/blog-entry-92.html