クロスフェードしながらスライドショーするjQuery

暑い日が続きますね。。
今日の名古屋はすっきり晴れた上天気。。
どこかへ遊びに行きたくなりました。
当然無理ですけど（笑）
先日サイトへフェードイン/フェードアウトしながら、画像や文字（要素）を切り替えるjQueryのプラグインInnerfade with jqueryを入れてみたので、備忘録です。。
以前はCrossSlide←こちらのを使ってたのですが、
今回のは、画像だけでなく文字もいけるので、後々何かに使うかな？？
というのと、
HTMLの構造がリスト構造になっているので、画像の追加や、後々のメンテナンスが楽そうだと、試しに使ってみました。
Innerfade with jquery
上記サイトのから、
１・jquery.innerfade.zipをダウンロード＆解凍
２・jsフォルダ内に入っているjquery.jsファイルとjquery.innerfade.jsを使用します。
必要なファイルや画像を用意したら、
jsファイルの読み込み部分のソースを記述します。

次にスクリプトと表示したい画像を記述します。

<pre class="brush:xhtml;">
<script type="text/javascript">
$(document).ready(
function(){
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '264px'
});
});
</script>
</pre>
<pre class="brush:xhtml;">
<ul id="portfolio">
<li>
<img src="http://kobo-miyabi.up.seesaa.net/photo/2010-06-26-1.jpg" width="350" height="264" border="0" align="" alt="蓮の花" />
</li>
<li>
<img src="http://kobo-miyabi.up.seesaa.net/photo/2010-06-26-2.jpg" width="350" height="264" border="0" align="" alt="蓮の花" />
</li>
</ul></pre>

containerheight: ‘264px’は画像の高さ（height）です。
表示される画像は同じ領域に表示する為、
全部同じ画像サイズにする必要があります。
下がパタメータの説明です
animationtype: ’slide’, // アニメーションの種類（’fade’ 又は ’slide’）
speed: 1000, // フェイドの速さ（ミリ秒 又は ’slow’,’normal’,’fast’）
timeout: 5000, // フェイド間の時間の設定（ミリ秒）
type: ’sequence’, // スライドショーの種類（’sequence’,’random’,’random_start’）
containerheight: ‘264px’ //囲んだ要素の高さ、(デフォルト値はauto)
画像はリンクを貼ることも出来るので、バナーとしても使えます。
設置は結構楽にできます、お試しください。