このエントリーをはてなブックマークに追加

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

このサンプルは、表示する画像を配列で指定する事で、自動的に写真を切り替えて表示してくれます。
特に、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

【code】

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

【html】

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

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

【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 Overlap</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('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 450, hu: 'images/', width: 600 });
  • });
  • </script>
  • </head>
  • <body>
  • <div id="overlap" class="slideshow">
  • <img src="images/1.jpg" alt="タイトル1" />
  • </div>
  • </body>
  • </html>