【ハウツー】ゼロからはじめるSmoothGallery - 本格的スライドショー機能でパワーアップ (5) クリックされたらスライド表示を行う | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるSmoothGallery - 本格的スライドショー機能でパワーアップ

5 クリックされたらスライド表示を行う

古籏一浩　 [2007/08/03]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- ／5

クリックされたらスライド表示を行う

ここまではページにアクセス後に、スライド表示を行っていましたが、ボタンやリンクがクリックされたらスライド表示を行いたい場合もあります。このような場合は、クリックされたらスライド表示を開始する関数を呼び出すようにします。サンプル08では、リンク文字がクリックされたら、スライド表示を行うように設定しています。


サンプル08の実行結果	リンク文字がクリックされたらスライド表示される

サンプル08

<!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,
                textShowCarousel : "画像一覧"
                 });
                $("startSlide").style.visibility = "hidden";
            }
            window.onload = function(){
                $("startSlide").onclick = startGallery;
            }
        // --></script>
        <style type="text/css"><!--
        .jdGallery .slideInfoZone h2 { font-size:12pt; }
        .jdGallery .slideInfoZone p { font-size:9pt; }
        #startSlide { font-size:12pt; background-color:#eee; border:1px blue solid; }
        --></style>
        <title>SmoothGalleryサンプル</title>
    </head>
    <body>
    <h1>SmoothGalleryサンプル</h1>
    <p><a href="#" id="startSlide">スライドショーを開始</a></p>
            <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>

サンプル08ではHTMLの<a>タグには、よく見られるonclickイベントが定義されていません。onclickイベントの定義は以下の行で行っています。

$("startSlide").onclick = startGallery;

このようにすることでHTML文書とスクリプトコードを分離することができます。(*5)

Smooth Galleryは他のスライド表示ライブラリと比べるとサポートしている機能が多いため、多少煩雑な部分もあります。他のスライド表示ライブラリでは物足りない、機能が不足している、細かく処理を指定したい場合などには良いでしょう。

*5この方法だと、すでにonclickイベントが設定されている場合に、新たにイベント処理を上書きしてしまいます。これを防ぐには、addEventListener()などのメソッドを使ってイベントを追加するようにしてください。addEventListener()を使うと、すでにあるイベントを上書きせずに追加する形になります。