Flickr風スライドショーをJavaScriptで再現 (5/5)
2008年11月10日 11時00分更新
文●古籏一浩、ASCII.jp
■完成した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/photoslider.css" type="text/css" media="all">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/photoslider.js"></script>
<script type="text/javascript"> <!--
$(function(){
FOTO.Slider.baseURL = './';
FOTO.Slider.bucket = {
'album': {
0: {'thumb': 'thumbnail/photo109.jpg', 'main': 'album/photo109.jpg', 'caption': '＃109 夕日を浴びる京急線<br>Location：Tokyo<br>Date：08-09-01 Tag：Nature'},
1: {'thumb': 'thumbnail/photo108.jpg', 'main': 'album/photo108.jpg', 'caption': '＃108 聖路加ガーデンから臨む<br>Location：Tokyo<br>Date：08-9-19 Tag：Architecure'},
2: {'thumb': 'thumbnail/photo107.jpg', 'main': 'album/photo107.jpg', 'caption': '＃107 多摩川土手で出会う<br>Location：Tokyo<br>Date：07-07-15 Tag：Nature'},
3: {'thumb': 'thumbnail/photo106.jpg', 'main': 'album/photo106.jpg', 'caption': '＃106 ススキと夕日<br>Location：Tokyo<br>Date：08-10-17 Tag：Nature'},
4: {'thumb': 'thumbnail/photo105.jpg', 'main': 'album/photo105.jpg', 'caption': '＃105 地面に落ちた葉<br>Location：Tokyo<br>Date：07-11-13 Tag：Nature'},
5: {'thumb': 'thumbnail/photo104.jpg', 'main': 'album/photo104.jpg', 'caption': '＃104 色づく葉<br>Location：Tokyo<br>Date：07-11-26 Tag：Nature'},
6: {'thumb': 'thumbnail/photo103.jpg', 'main': 'album/photo103.jpg', 'caption': '＃103 北の丸公園で太陽とススキ<br>Location：Tokyo<br>Date：08-10-24 Tag：Nature'},
7: {'thumb': 'thumbnail/photo102.jpg', 'main': 'album/photo102.jpg', 'caption': '＃102 倉敷川から横道へ<br>Location：Kurashiki<br>Date：08-08-11 Tag：Architecure'},
8: {'thumb': 'thumbnail/photo101.jpg', 'main': 'album/photo101.jpg', 'caption': '＃101 餘部鉄橋を通る特急電車<br>Location：Hyogo<br>Date：08-08-14 Tag：Nature'},
9: {'thumb': 'thumbnail/photo100.jpg', 'main': 'album/photo100.jpg', 'caption': '＃100 群馬の冬<br>Location：Tokyo<br>Date：07-03-01 Tag：Nature'},
10: {'thumb': 'thumbnail/photo099.jpg', 'main': 'album/photo099.jpg', 'caption': '＃099 そうだ、京都行こう<br>Location：Kyoto<br>Date：04-03-20 Tag：Girls'},
11: {'thumb': 'thumbnail/photo098.jpg', 'main': 'album/photo098.jpg', 'caption': '＃098 紅葉の名所・東福寺「通天橋」<br>Location：Kyoto<br>Date：07-11-22 Tag：Nature'},
12: {'thumb': 'thumbnail/photo097.jpg', 'main': 'album/photo097.jpg', 'caption': '＃097 夕暮れ時の二月堂<br>Location：Nara<br>Date：07-08-13 Tag：Architecure'},
13: {'thumb': 'thumbnail/photo096.jpg', 'main': 'album/photo096.jpg', 'caption': '＃096 東大寺の大仏殿にて<br>Location：Nara<br>Date：08-08-13 Tag：Architecure'},
14: {'thumb': 'thumbnail/photo095.jpg', 'main': 'album/photo095.jpg', 'caption': '＃095 東京ステーションのある夜<br>Location：Tokyo<br>Date：07-09-01 Tag：Architecure'}
}
};
FOTO.Slider.reload('album');
FOTO.Slider.preloadImages('album');
FOTO.Slider.play('album');
});
// --></script>
<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 class="photoslider" id="album"></div>
<div class="navi">
<a href="#" onClick="FOTO.Slider.play('album')"><img src="images/shared/play.gif"></a>
<img src="images/shared/slush.gif">
<a href="#" onClick="FOTO.Slider.stop('album')"><img src="images/shared/stop.gif"></a>
</div>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
</body>
</html>
