ボタンクリックで前後のスライドに移動させる

Gliderでは、ユーザーのボタンクリックにより前後のスライド表示に切り替えることができます。前後のスライドに移動させるためにはnew Glider()で生成されたスライドオブジェクトを変数に入れておく必要があります。サンプル06では以下のようにして変数gliderObj1に入れています。

gliderObj1 = new Glider("glider1");

この状態で前のスライドに移動させるには以下のようにprevious()メソッドを使います。

gliderObj1.previous();

次のスライドに移動させるには以下のようにnext()メソッドを使います。

gliderObj1.next();

これで自由に前後のスライドに移動できるようになります。サンプル06ではフォームのボタンがクリックされたら前後のスライドに移動するようにしています。ボタンがクリックされた場合に処理するには以下のように記述されることが多くあります。

<input type="button" id="prevButton" value="前のページへ" onClick="gliderObj1.previous();">

このように記述してしまうとHTMLとJavaScriptのコードが分離されていないため、プログラムを修正する場合はHTMLファイルを編集することになってしまいます。このような場合はHTMLコードとJavaScriptのコードを分離すれば良いのですが、Gliderはprototype.jsを利用しているので以下のようにEvent.observe()を使って記述することができます。Event.observe()を使えばブラウザによるイベントの違いをあまり意識せずにすみます。また、すでにボタンに同じイベントが設定されている場合でも上書きせずに追加する形になるのでイベント処理が干渉し動作がおかしくなることを防げます。

Event.observe("prevButton", "click", function(){ gliderObj1.previous(); }, true);

サンプル06の実行結果。ボタンをクリックするとスライドがはじまるように設定されている

サンプル06

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Gliderサンプル</title>
            <link rel="stylesheet" href="css/glider.css" type="text/css">
            <script type="text/javascript" src="js/prototype.js"></script>
            <script type="text/javascript" src="js/effects.js"></script>
            <script type="text/javascript" src="js/glider.js"></script>
            <script type="text/javascript" charset="utf-8"><!--
                window.onload = function(){
                    gliderObj1 = new Glider("glider1");
                    Event.observe("prevButton", "click", function(){ gliderObj1.previous(); }, true);
                    Event.observe("nextButton", "click", function(){ gliderObj1.next(); }, true);
                }
            // --></script>
        </head>
        <body>
        <h1>Gliderサンプル</h1>
        <div id="glider1">
            <div class="controls">
                <a href="#page01">ページ 1</a> | 
                <a href="#page02">ページ 2</a> |
                <a href="#page03">ページ 3</a> |
            </div>
            <div class="scroller">
                <div class="content">
                    <div class="section" id="page01">
                        ■ページ 1<br>
                        <p>最初のページです</p>
                    </div>
                    <div class="section" id="page02">
                        ■ページ 2<br>
                        <p>二番目のページです<br>
                        <img src="photo/001.jpg" width="384" height="216">
                        </p>
                    </div>
                    <div class="section" id="page03">
                        ■ページ 3<br>
                        <p>三番目のページです<br>
                        特にコメントはありません...
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <form id="ctrlForm">
            <input type="button" id="prevButton" value="前のページへ">
            <input type="button" id="nextButton" value="次のページへ">
        </form>
        </body>
 </html>