29分でできる！あのサイトの“技”を盗め ― 第9回

Flickr風スライドショーをJavaScriptで再現

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>