jqueryで縦にサムネイルをスライドするスライドショーを作成

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

使用するスクリプト

• slideshow.js
• mootools.js

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>