simpleSli.de: A Super-Simple jQuery Slideshow Plugin

simplesli.deはdivタグ内をフェードしながらスライドするjqueryプラグイン。
日本での紹介記事では殆ど名前からかシンプルに設置できる、と謳っていますが、それはルールに沿えば、というお話です。
わかってしまえば簡単なんですが、理解するまでわたしはすこし時間がかかりました。
「ああーこんな風に簡単にできるんだ！（さくさく）」なんて実装できる方がうらやましい・・。

インストール

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.4");</script>
	<script type="text/javascript" src="js/simpleSlide.js"></script>
	<script type="text/javascript">$(document).ready( function(){ 
	
	simpleSlide();
	
	 });</script>

・jquery参照（1.4以上）
・DLしたjsファイルまでのパス
・simpleSlide();開始

これで、下準備は完了です。

スライド部分の記述のルールなど

• ・同じスライド内は、relに同じ名前をつける
• ・windowは領域、trayは入れ物、slideは中身
• ・slide要素は繰り返せる。altでidをつけることができる
• ・class=”jump-to”で相対altのidへジャンプすることができる
• ・left-button、right-buttonはwindowの外でも動く

このルールを踏まえた上で、ソースコードを書き込む。

<div class="simpleSlide-window" rel="this_particular_slideshow">
    <div class="simpleSlide-tray" rel="this_particular_slideshow">
        <div class="simpleSlide-slide" rel="this_particular_slideshow" alt="1">

		test1
		
		<span class="jump-to" rel="this_particular_slideshow" alt="2">jump to slide 2</span>
        </div>
        
        <div class="simpleSlide-slide" rel="this_particular_slideshow" alt="2">

		test2
		<span class="jump-to" rel="this_particular_slideshow" alt="3">jump to slide 3</span>

        </div>
        
        <div class="simpleSlide-slide" rel="this_particular_slideshow" alt="3">

		test3
		<span class="jump-to" rel="this_particular_slideshow" alt="1">jump to slide 1</span>

        </div>
        
    </div>
</div>
<div class="left-button" rel="this_particular_slideshow">left</div>
<div class="right-button" rel="this_particular_slideshow">right</div>

スライドにあたるdivを増やして、くるくる変化すれば完成です。
本家にあるようなマウスオーバーなイベントは入っていないので、自分で追加する必要があります。
init.jsというものをhislabさんのところで公開されてました、こちらを参考にするといいかもです。

参考サイト

スマートなスライド表示が出来るjQueryプラグイン「simpleSli.de」