自動切替・サムネイルスライドショー / #04 Push【myisland】

自動切替・サムネイルスライドショー/Photo Gallery #04 Push

このサンプルは、表示する画像を配列で指定する事で、自動的に写真を切り替えて表示してくれます。
特に、iPhoto同様に写真が移動しながら表示される点や、写真が変わる際にフェードアウトしながらと言う演出が良いですね。

【DEMO】

▶ 自動切替・サムネイルスライドショー/Photo Gallery #04 Push

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / slideshow.css
　　　 | 　　　　　 controller.png
　　　 | 　　　　　 controller-controls.png
　　　 | 　　　　　 loader.png
　　　 |
　　　 +-- js / mootools-1.3.2-core.js
　　　 | 　　　　 mootools-1.3.2.1-more.js
　　　 | 　　　　 slideshow.js
　　　 | 　　　　 slideshow.push.js
　　　 |
　　　 +-- images / 1t.jpg
　　　　　　　　　　　　　 1.jpg
　　　　　　　　　　　　　 2t.jpg
　　　　　　　　　　　　　 2.jpg
　　　　　　　　　　　　　 3t.jpg
　　　　　　　　　　　　　 3.jpg
　　　　　　　　　　　　　 4t.jpg
　　　　　　　　　　　　　 4.jpg
　　　　　　　　　　　　　 5t.jpg
　　　　　　　　　　　　　 5.jpg
　　　　　　　　　　　　　 6t.jpg
　　　　　　　　　　　　　 6.jpg
　　　　　　　　　　　　　 7t.jpg
　　　　　　　　　　　　　 7.jpg
　　　　　　　　　　　　　 8t.jpg
　　　　　　　　　　　　　 8.jpg
　　　　　　　　　　　　　 9t.jpg
　　　　　　　　　　　　　 9.jpg

【code】

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

html
css
javascript
image
Sample Code

【html】

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

<div id="push" class="slideshow">
<img src="images/1.jpg" alt="タイトル1" />
</div>

【slideshow.css】

【javascript】

【images】

デモで使用しているサンプルの画像です。

【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>フォトギャラリーサンプル #04 Push</title>
<link rel="stylesheet" type="text/css" href="css/slideshow.css" />
<script type="text/javascript" src="js/mootools-1.3.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.3.2.1-more.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript" src="js/slideshow.push.js"></script>
<script>
window.addEvent('domready', function(){
var data = { '1.jpg': { caption: 'タイトル1' }, '2.jpg': { caption: 'タイトル2' }, '3.jpg': { caption: 'タイトル3' }, '4.jpg': { caption: 'タイトル4' }, '5.jpg': { caption: 'タイトル5' }, '6.jpg': { caption: 'タイトル6' }, '7.jpg': { caption: 'タイトル7' }, '8.jpg': { caption: 'タイトル8' }, '9.jpg': { caption: 'タイトル9' }};
new Slideshow.Push('push', data, { height: 450, hu: 'images/', transition: 'back:in:out', width: 600 });
});
</script>
</head>
<body>
<div id="push" class="slideshow">
<img src="images/1.jpg" alt="タイトル1" />
</div>
</body>
</html>

お役立ちツール

Code license
MIT License
素材配布先