一定時間ごとに切り替えて表示させる

Smooth Galleryでは一定時間ごと画像を自動的に切り替えて表示させることができます。手動で切り替えるか自動で切り替えるかは、timedフラグによって決められています。timedフラグがtrueであれば自動切り替え、falseであれば手動切り替えになります。以下のように指定すると自動的に画像が切り替わり表示されます(サンプル03)。

var myGallery = new gallery($("myGallery"), { timed: true });

サンプル03の実行結果

実行すると

一定時間ごとに

スライドショーのように切り替わる

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/layout.css" type="text/css">
        <link rel="stylesheet" href="css/jd.gallery.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/jd.gallery.js"></script>
        <script type="text/javascript"><!--
            function startGallery() {
                var myGallery = new gallery($("myGallery"), { timed: true });
            }
            window.onDomReady(startGallery);
        // --></script>
        <title>SmoothGalleryサンプル</title>
    </head>
    <body>
    <h1>SmoothGalleryサンプル</h1>
            <div id="myGallery">
                <div class="imageElement">
                    <h3>富士山</h3>
                    <p>日本の代表的な山です</p>
                    <a href="http://ja.wikipedia.org/wiki/富士山" title="詳細を表示" class="open"></a>
                    <img src="photo/001.jpg" class="full" />
                    <img src="thumb/001.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>夕焼け</h3>
                    <p>神社の夕焼けです</p>
                    <a href="http://ja.wikipedia.org/wiki/夕焼け" title="詳細を表示" class="open"></a>
                    <img src="photo/002.jpg" class="full" />
                    <img src="thumb/002.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>富山湾</h3>
                    <p>綺麗な富山湾です</p>
                    <a href="http://ja.wikipedia.org/wiki/富山湾" title="詳細を表示" class="open"></a>
                    <img src="photo/003.jpg" class="full" />
                    <img src="thumb/003.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>白糸の滝</h3>
                    <p>有名な白糸の滝です</p>
                    <a href="http://ja.wikipedia.org/wiki/白糸の滝" title="詳細を表示" class="open"></a>
                    <img src="photo/004.jpg" class="full" />
                    <img src="thumb/004.jpg" class="thumbnail" />
                </div>
            </div>
    </body>
</html>

自動的に画像が切り替わる際に左右の矢印ボタンや、画像のキャプションなどが煩わしい場合があります。この、矢印ボタンや情報パネル、ショーケースなどの表示のオン/オフを切り替えることができます。これはnew gallery()の2番目のオプションで指定することができます。以下のようにすると情報パネル以外、表示されなくなります(サンプル04)。

var myGallery = new gallery($("myGallery"), { 
    timed: true,
    showArrows: false,
    showCarousel: false,
    embedLinks: false,
    showInfopane:true
});

サンプル04の実行結果

サンプル04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/layout.css" type="text/css">
        <link rel="stylesheet" href="css/jd.gallery.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/jd.gallery.js"></script>
        <script type="text/javascript"><!--
            function startGallery() {
                var myGallery = new gallery($("myGallery"), { 
                timed: true,
                showArrows: false,
                showCarousel: false,
                embedLinks: false,
                showInfopane:true
                 });
            }
            window.onDomReady(startGallery);
        // --></script>
        <title>SmoothGalleryサンプル</title>
    </head>
    <body>
    <h1>SmoothGalleryサンプル</h1>
            <div id="myGallery">
                <div class="imageElement">
                    <h3>富士山</h3>
                    <p>日本の代表的な山です</p>
                    <a href="http://ja.wikipedia.org/wiki/富士山" title="詳細を表示" class="open"></a>
                    <img src="photo/001.jpg" class="full" />
                    <img src="thumb/001.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>夕焼け</h3>
                    <p>神社の夕焼けです</p>
                    <a href="http://ja.wikipedia.org/wiki/夕焼け" title="詳細を表示" class="open"></a>
                    <img src="photo/002.jpg" class="full" />
                    <img src="thumb/002.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>富山湾</h3>
                    <p>綺麗な富山湾です</p>
                    <a href="http://ja.wikipedia.org/wiki/富山湾" title="詳細を表示" class="open"></a>
                    <img src="photo/003.jpg" class="full" />
                    <img src="thumb/003.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>白糸の滝</h3>
                    <p>有名な白糸の滝です</p>
                    <a href="http://ja.wikipedia.org/wiki/白糸の滝" title="詳細を表示" class="open"></a>
                    <img src="photo/004.jpg" class="full" />
                    <img src="thumb/004.jpg" class="thumbnail" />
                </div>
            </div>
    </body>
</html>

これらのプロパティ名と表示されるパネルの対応は以下のようになります。trueを指定すると表示、falseを指定すると非表示になります。

showArrows 左右の矢印ボタン
showCarousel 画像のショーケース(画像選択パネル)
embedLinks 画像のリンク時に表示されるアイコン
showInfopane キャプション表示パネル

スライド画像の切り替え時間はデフォルトでは9秒になっています。この切り替え時間も指定することができます。切り替え時間はdelayプロパティで指定することができます。値はミリ秒なので3秒で切り替えるのであれば3000を指定します。以下のように指定すると全てのパネルを消して3秒ごとにスライド表示を行います(サンプル05)。

var myGallery = new gallery($("myGallery"), { 
    timed: true,
    showArrows: false,
    showCarousel: false,
    embedLinks: false,
    showInfopane:false,
    delay:3000
});

サンプル05の実行結果

スライドの切り替えが

デフォルト値よりも早く

3秒間隔に設定

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/layout.css" type="text/css">
        <link rel="stylesheet" href="css/jd.gallery.css" type="text/css">
        <script type="text/javascript" src="js/mootools.js"></script>
        <script type="text/javascript" src="js/jd.gallery.js"></script>
        <script type="text/javascript"><!--
            function startGallery() {
                var myGallery = new gallery($("myGallery"), { 
                timed: true,
                showArrows: false,
                showCarousel: false,
                embedLinks: false,
                showInfopane:false,
                delay:3000
                 });
            }
            window.onDomReady(startGallery);
        // --></script>
        <title>SmoothGalleryサンプル</title>
    </head>
    <body>
    <h1>SmoothGalleryサンプル</h1>
            <div id="myGallery">
                <div class="imageElement">
                    <h3>富士山</h3>
                    <p>日本の代表的な山です</p>
                    <a href="http://ja.wikipedia.org/wiki/富士山" title="詳細を表示" class="open"></a>
                    <img src="photo/001.jpg" class="full" />
                    <img src="thumb/001.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>夕焼け</h3>
                    <p>神社の夕焼けです</p>
                    <a href="http://ja.wikipedia.org/wiki/夕焼け" title="詳細を表示" class="open"></a>
                    <img src="photo/002.jpg" class="full" />
                    <img src="thumb/002.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>富山湾</h3>
                    <p>綺麗な富山湾です</p>
                    <a href="http://ja.wikipedia.org/wiki/富山湾" title="詳細を表示" class="open"></a>
                    <img src="photo/003.jpg" class="full" />
                    <img src="thumb/003.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>白糸の滝</h3>
                    <p>有名な白糸の滝です</p>
                    <a href="http://ja.wikipedia.org/wiki/白糸の滝" title="詳細を表示" class="open"></a>
                    <img src="photo/004.jpg" class="full" />
                    <img src="thumb/004.jpg" class="thumbnail" />
                </div>
            </div>
    </body>
</html>