[Ultimate Fade-in slideshowライブラリ] エンドレスでスライドショーを表示する
説明
Ultimate Fade-in slideshowライブラリでエンドレスでスライドショーを表示するには、あらかじめ画像を表示するコンテナをdivタグで用意しID名を割り当てます。次にスクリプトで表示するコンテナと画像のURLを指定します。表示に関するオプションはfadeSlideShow()のオプションパラメータで指定します。
画像の表示先はwrapperid、コンテナのサイズはdimensionsに配列形式で、表示する画像のURLはimagearrayに配列形式で指定します。imagearrayの配列要素として、さらに配列で画像に関する情報を設定します。まず、表示する画像のURL、次にリンク先、リンク先ターゲット、キャプションの4つの要素を記述します。リンク先がない場合には""（空文字）にしておきます。
表示する時間はdisplaymodeのオプションパラメータpauseにミリ秒を指定します。フェード時間はfadedurationにミリ秒で指定します。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fadeslideshow.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>Ultimate Fade-in slideshowサンプル</h1>
<div id="myPhoto"></div>
</body>
</html>
【sample.js】
var mygallery=new fadeSlideShow({
wrapperid: "myPhoto",
dimensions: [600, 338],
imagearray: [
["photo/1.jpg", "", "", "松本城"],
["photo/2.jpg", "", "", "浅間山"],
["photo/3.jpg", "", "", "高ボッチ高原"],
["photo/4.jpg", "", "", "三九郎（どんど焼き）"],
["photo/5.jpg", "", "", "雪景色"],
["photo/6.jpg", "", "", "浅間温泉街"]
],
displaymode: {type: "auto", pause:2500, cycles:0, wraparound:false},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})