Simple Fade SlideShowプラグイン
Simple Fade SlideShowプラグインを使って、画像をスライドショーで表示させてみましょう。例えば、デジカメで撮った写真を順次、自動再生させたい場合などに使えます。サイトからプラグインをダウンロードします。
simpleFadeSlideShow_200.zipというファイルがダウンロードされるので、解凍後に作成されるsimpleFadeSlideShow_200フォルダをpluginsにコピーします。解凍後に作成されるfadeSlideShowフォルダを、pluginsにコピーします。
リスト1に、Simple Fade SlideShowプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQueryPlugin_SimpleFadeSlideShowサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/simplefadeSlideShow_200/fadeSlideShow.js"></script>
<!--3.スライドショーの設定-->
<script type="text/javascript">
$(document).ready(function () {
$('#slideshow').fadeSlideShow({
width: 364, // slideshowの幅を指定する
height: 275, // slideshowの高さを指定する
interval: 3000, // 画像を切り替える間隔を指定する(ms)
PlayPauseElement:false,//画像の再生・停止を選択可能にするかを指定
NextElement:false,//次の画像を選択可能にするかを指定
PrevElement:false,//前の画像を選択可能にするかを指定
ListElement:false //画像リストを選択可能にするかを指定
});
});
</script>
</head>
<body>
<h1>jQueryPlugin_SimpleFadeSlideShowサンプル</h1>
<div id="slideshow">
<div><img src="plugins/simplefadeSlideShow_200/images/fadeSlideShow_05.jpg" width="364" height="275" alt="サンプル画像5"/></div><!--最後に表示される画像-->
<div><img src="plugins/simplefadeSlideShow_200/images/fadeSlideShow_04.jpg" width="364" height="275" alt="サンプル画像4"/></div>
<div><img src="plugins/simplefadeSlideShow_200/images/fadeSlideShow_03.jpg" width="364" height="275" alt="サンプル画像3"/></div>
<div><img src="plugins/simplefadeSlideShow_200/images/fadeSlideShow_02.jpg" width="364" height="275" alt="サンプル画像2"/></div>
<div><img src="plugins/simplefadeSlideShow_200/images/fadeSlideShow_01.jpg" width="364" height="275" alt="サンプル画像1"/></div><!--最初に表示される画像-->
</div>
</body>
</html>
スライドショーの設定は3のように画像の表示領域idに対してfadeSlideShowメソッドを用いて、画像の表示領域の幅、高さ、画像を切り替える間隔などを指定します。
Simple Fade SlideShowプラグインの主なオプションを表1に示します。
| オプション | 説明 | デフォルト |
| width | スライドショーの幅を指定 | 画像の幅 |
| height | スライドショーの高さを指定 | 画像の高さ |
| interval | 画像を切り替える間隔（ms） | 3000 |
| PlayPauseElement | 画像の再生・停止を選択可能にするかを指定 true/false |
'fssPlayPause'（demoStyleSheet.cssで指定されているid） |
| PlayText | Play機能として表示されるテキスト | 'Play' |
| PauseText | Pause機能として表示されるテキスト | 'Pause' |
| NextElement | 次の画像を選択可能にするかを指定 true/false |
'fssNext'（demoStyleSheet.cssで指定されているボタンアイコンのid） |
| NextElementText | Next機能として表示されるテキスト | 'Next >' |
| PrevElement | 前の画像を選択可能にするかを指定 true/false |
'fssPrev'（demoStyleSheet.cssで指定されているボタンアイコンのid） |
| PrevElementText | Prev機能として表示されるテキスト | '<Prev' |
| ListElement | 画像リストを選択可能にするかを指定 true/false |
'fssList'（demoStyleSheet.cssで指定されている画像リストのid） |
| autoplay | スライドショーの自動再生を指定 | TRUE |
PlayPauseElement、NextElement、PrevElement、ListElementはデフォルトで使用可能となっており、各要素を別途作成しなければなりません。機能を無効化したい場合はサンプルのようにfalse指定する必要があります。要素の指定については、simpleFadeSlideShow_200フォルダの直下にあるdemoStyleSheet.cssを参考にしてください。
また、サンプルでは表示させたい画像をsimplefadeSlideShow_200フォルダ直下のimagesフォルダに配置しています。画像を配置した場所によって適宜imgタグのsrc属性を変更してください。今回のサンプルで使用する5枚の画像を図1に、スライドショープラグイン使用時の結果を図2に示します。
