Smooth Galleryを使う

それでは実際にSmooth Galleryを使ってみましょう。ここでは実画像をphotoフォルダに、サムネール画像をthumbフォルダに入れてあります。

本稿のフォルダ配置

Smooth Galleryはエフェクト処理などにMooToolsライブラリを使用しています。このライブラリはSmooth Galleryをダウンロードすると一式で入っていますので新たにダウンロードする必要はありません。Smooth Galleryを使用する前には、以下のようにMooToolsライブラリを先に読み込ませておく必要があります。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/jd.gallery.js"></script>

Smooth Galleryを使う場合にはスタイルシートファイルも読み込ませる必要があります。このファイルはjd.gallery.cssで以下のようにして読み込ませます(*4)。

<link rel="stylesheet" href="css/jd.gallery.css" type="text/css">

これでSmooth Galleryを利用する準備が完了です。それでは実際のHTMLコード、スクリプトコードについて説明します。Smooth Galleryでは、あらかじめ規定されたタグで画像やキャプションを囲む必要があります。これは以下のように指定します。スタイルシートクラス名などは変更しないようにしてください。

<div id="myGallery">
    <div class="imageElement">
        <h3>キャプションタイトル</h3>
        <p>キャプション</p>
        <a href="実画像クリック時のジャンプ先" class="open"></a>
        <img src="実画像のURL" class="full" />
        <img src="サムネール画像のURL" class="thumbnail" />
    </div>
    <div class="imageElement">
        （画像の下図だけdivタグのimageElement範囲を列記する）
    </div>
</div>

表示する画像の数だけ<div class="imageElement">～</div>を繰り返し記述します。画像が1枚だけだと正しく動作しません。ページが読み込まれたらスライド表示を行うには以下のようにします(サンプル01)。

<script type="text/javascript"><!--
    function startGallery() {
        var myGallery = new gallery($("myGallery"), { timed: false });
    }
    window.onDomReady(startGallery);
// --></script>

サンプル01の実行結果

サンプル01

<!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: false });
            }
            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>
    </body>
</html>

サンプル01は2枚の画像ですが、サンプル02では4枚の画像がスライド表示します。枚数が増えても<div class="imageElement">～</div>の部分を増やすだけなので非常に簡単です。また、ボタンがクリックされたらスライド表示を行うようにする方法については最後に説明します。

サンプル02の実行結果(picturesをクリック後のショット)

サンプル02

<!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: false });
            }
            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>
*4 ここで説明しているサンプルはページ全体のレイアウトを指定するlayout.cssも読み込ませています。これは、Smooth Galleryライブラリに同梱されているものを使用しています。