このページの本文へ

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>

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く