スライダー｜フォトギャラリー設置方法 Tips【myisland】

スライダー / Photo Gallery #11

このサンプルは、jQueryのSpaceGalleryプラグインを利用してイメージをアニメーション化して切り替えます。
イメージをクリックすると大きくズームしながら次のイメージと入れ替わります。

【DEMO】

【ディレクトリ構成例】

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

html
css
javascript
photo
Sample Code

【html】

HTMLファイルの<body></body>の間に下記のコードを入力します。

・各タイトル名 (写真画像タイトル名)

・各01.jpg(写真画像ファイル名)

・各写真画像サイズwidth="500" height="330"

<div id="album1">
<div class="controls">
| <a href="#album1_page01">タイトル #1</a> |
<a href="#album1_page02">タイトル #2</a> |
<a href="#album1_page03">タイトル #3</a> |
<a href="#album1_page04">タイトル #4</a> |
<a href="#album1_page05">タイトル #5</a> |
<a href="#album1_page06">タイトル #6</a> |
<a href="#album1_page07">タイトル #7</a> |
</div>
<div class="scroller">
<div class="content">
<div class="section" id="album1_page01">
タイトル #1<br />
<img src="photo/01.jpg" width="500" height="330" alt="タイトル #1">
</div>
<div class="section" id="album1_page02">
タイトル #2<br />
<img src="photo/02.jpg" width="500" height="330" alt="タイトル #2">
</div>
<div class="section" id="album1_page03">
タイトル #3<br />
<img src="photo/03.jpg" width="500" height="330" alt="タイトル #3">
</div>
<div class="section" id="album1_page04">
タイトル #4<br />
<img src="photo/04.jpg" width="500" height="330" alt="タイトル #4">
</div>
<div class="section" id="album1_page05">
タイトル #5<br />
<img src="photo/05.jpg" width="500" height="330" alt="タイトル #5">
</div>
<div class="section" id="album1_page06">
タイトル #6<br />
<img src="photo/06.jpg" width="500" height="330" alt="タイトル #6">
</div>
<div class="section" id="album1_page07">
タイトル #7<br />
<img src="photo/07.jpg" width="500" height="330" alt="タイトル #7">
</div>
</div>
</div>
</div>

【gallery11.css】

#album1{
text-align: center;
}
div.controls {
font-size: 13px;
}
div.scroller {
width: 662px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
div.scroller div.section {
width: 642px;
height:400px;
overflow:hidden;
float:left;
padding:10px;
}
div.scroller div.content {
width: 10000px;
}

【javascript】

<script type="text/javascript"><!--
Event.observe(window, "load", function(){
new Glider("album1", { duration:1.0 } );
});
// --></script>

【photo】

▼デモで使用しているサンプル画像です。(500×330px)

【Sample Code】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>フォトギャラリーサンプル #11</title>
<link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/glider.js"></script>
<script type="text/javascript"><!--
Event.observe(window, "load", function(){
new Glider("album1", { duration:1.0 } );
});
// --></script>
</head>
<body>
<div id="album1">
<div class="controls">
| <a href="#album1_page01">タイトル #1</a> |
<a href="#album1_page02">タイトル #2</a> |
<a href="#album1_page03">タイトル #3</a> |
<a href="#album1_page04">タイトル #4</a> |
<a href="#album1_page05">タイトル #5</a> |
<a href="#album1_page06">タイトル #6</a> |
<a href="#album1_page07">タイトル #7</a> |
</div>
<div class="scroller">
<div class="content">
<div class="section" id="album1_page01">
タイトル #1<br />
<img src="photo/01.jpg" width="500" height="330" alt="タイトル #1">
</div>
<div class="section" id="album1_page02">
タイトル #2<br />
<img src="photo/02.jpg" width="500" height="330" alt="タイトル #2">
</div>
<div class="section" id="album1_page03">
タイトル #3<br />
<img src="photo/03.jpg" width="500" height="330" alt="タイトル #3">
</div>
<div class="section" id="album1_page04">
タイトル #4<br />
<img src="photo/04.jpg" width="500" height="330" alt="タイトル #4">
</div>
<div class="section" id="album1_page05">
タイトル #5<br />
<img src="photo/05.jpg" width="500" height="330" alt="タイトル #5">
</div>
<div class="section" id="album1_page06">
タイトル #6<br />
<img src="photo/06.jpg" width="500" height="330" alt="タイトル #6">
</div>
<div class="section" id="album1_page07">
タイトル #7<br />
<img src="photo/07.jpg" width="500" height="330" alt="タイトル #7">
</div>
</div>
</div>
</div>
</body>
</html>

スライダー＃１１