趣味の写真サイトにスライドショー機能を組み込む
今回は、前回の連載でも使った趣味の写真サイト「JPhoto.net」のギャラリーページをもとに、個別の写真を選ぶと自動的にスライドショーが始まるように改良したいと思います。
まず、何も組み込んでいない状態のソースコードは以下のようになっています（元になる作例ページ）。
スライドショーを組み込む前の状態。写真が1枚だけ表示されているだけです
■元のHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力でござる">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<title>JPhoto.net - Photo Viewer -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top">Top</a></li>
<li><a href="photo.html" id="menu-gallery" class="current">Gallery</a></li>
<li><a href="seacrh.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<div class="photoAlbum recent" style="margin-top:20px">
<h2><img src="images/photo/menu01.gif" width="120" height="13"></h2>
</div>
<div id="album"><img src="album/photo1.jpg"></div>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
</body>
</html>
それではスライド表示のライブラリを組み込みましょう。Photo Sliderは、スクリプトを組み込む前に、スライドショーを表示するHTMLタグを設定しておく必要があります。
スライドショーを表示させる部分の<div>タグに、任意のID名とスタイルシートクラス名「photoslider」を指定します。作例ではID名を「album」としています。このID名は後にスクリプトで使用しますので、なるべく分かりやすい名前にしておくとよいでしょう。
次に<script>タグで以下のようにjQueryとPhoto Sliderライブラリを読み込ませます。
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/photoslider.js"></script>これでライブラリを組み込む準備ができました。
表示する画像をスクリプトで指定
続いて、スクリプトを設定します。まず、写真とサムネイル画像があるURLの基準となるパス (URL) を「FOTO.Slider.baseURL」に設定します。作例のようにHTMLファイルの階層以下にある場合には「'./'」としておきます。このFOTO.Slider.baseURLが正しく設定されていないとスライドショーが表示されません。
次に実際に表示する写真とサムネイル、そして表示する順番を「FOTO.Slider.bucket」に指定します。最初に<div>タグで指定したID名「album」を書いたあとに、以下のフォーマットに従って表示する画像とサムネイルおよびキャプションを表示したい数だけ並べます（キャプションは省略できます）。
番号 : { 'thumb' : 'サムネイル画像のパス', 'main' : '写真画像のパス', 'caption' : 'キャプション' }並べて書くときに行末の「,（カンマ）」に注意してください。最後の行に,（カンマ）をつけてしまうとInternet Explorer（IE）で正しく動作しなくなります（他のブラウザでは動作します）ので、つけないようにします。
また、サムネイル画像と写真画像は「FOTO.Slider.baseURL」に設定した基準パスからの位置になります。サンプルでは「FOTO.Slider.baseURL = './'」としているので、サムネイル画像のURLに「'thumbnail/photo1.jpg'」と指定されている場合、以下のURLが参照されることになります。
./thumbnail/photo1.jpg
ここまでに解説したスクリプトの設定は以下のとおりです。この設定さえ終われば、あとは簡単です。
FOTO.Slider.baseURL = './';
FOTO.Slider.bucket = {
'album': {
0: {'thumb': 'thumbnail/photo1.jpg', 'main': 'album/photo1.jpg', 'caption': 'すすき'},
1: {'thumb': 'thumbnail/photo2.jpg', 'main': 'album/photo2.jpg', 'caption': 'ねこ'},
2: {'thumb': 'thumbnail/photo3.jpg', 'main': 'album/photo3.jpg', 'caption': 'でんしゃ'},
3: {'thumb': 'thumbnail/photo4.jpg', 'main': 'album/photo4.jpg', 'caption': 'どこかの建物'},
4: {'thumb': 'thumbnail/photo5.jpg', 'main': 'album/photo5.jpg', 'caption': '和室'},
5: {'thumb': 'thumbnail/photo6.jpg', 'main': 'album/photo6.jpg', 'caption': '石段'},
6: {'thumb': 'thumbnail/photo7.jpg', 'main': 'album/photo7.jpg', 'caption': '新幹線'},
7: {'thumb': 'thumbnail/photo8.jpg', 'main': 'album/photo8.jpg', 'caption': '夜景'},
8: {'thumb': 'thumbnail/photo9.jpg', 'main': 'album/photo9.jpg', 'caption': '日没か夜明け？'}
}
}スクリプトが動作しない環境に注意
これまで本連載で紹介したAjax／JavaScriptライブラリのほとんどは、HTMLタグにID名を指定して動くものだったので、スクリプトが動作しない環境（JavaScriptがオフにされている場合など）でも、コンテンツの内容は表示されました。
ところがPhoto Sliderは、表示するサムネイルや画像をHTMLタグではなくスクリプト側に記述するため、スクリプトが動作しない環境では画像がまったく表示されなくなってしまいます。実際にWebサイトに組み込む場合には、以下のように<noscript>タグと<img>タグを使って画像を表示するか、もしくは注意書きなどを表示しておくとよいでしょう。
<div class="photoslider" id="album"><noscript><img src="代替画像のURL"></noscript></div>
