Tweet
自動切替・サムネイルスライドショー/Photo Gallery #04 NoOverlap
このサンプルは、表示する画像を配列で指定する事で、自動的に写真を切り替えて表示してくれます。
特に、iPhoto同様に写真が移動しながら表示される点や、写真が変わる際にフェードアウトしながらと言う演出が良いですね。
【DEMO】
【ディレクトリ構成例】
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
|
+-- 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
|
+-- 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
|
+-- 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】
HTMLファイルの<body></body>の間に下記のコードを入力します。
- <div id="noOverlap" 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 NoOverlap</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>
- 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('noOverlap', data, { height: 450, hu: 'images/', overlap: false, resize: 'fit', width: 600 });
- });
- </script>
- </head>
- <body>
- <div id="noOverlap" class="slideshow">
- <img src="images/1.jpg" alt="タイトル1" />
- </div>
- </body>
- </html>