Gliderを使う

Gliderを使うには最初に必要なライブラリファイルとスタイルシートを読み込ませます。prototype.jsファイル、script.aculo.usのeffect.jsファイル、glider.jsファイルの順番に<script>タグを使って読み込ませます。この順番で読み込ませないと正しく動作しません。

<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>

スタイルシートはglider.cssファイルを<link>タグを使って読み込ませます。

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

次にスライド表示を行う領域を設定します。表示領域は必ず<div>タグを使いID名を指定します。ここで指定したID名をスクリプト内で使用することになります。サンプル01ではglider1という名前のIDを指定しています。

<div id="glider1">～</div>

gliderでは「コントロール領域」と「内容表示領域」の2つが用意されており、それぞれ<div>タグに必要なスタイルシートクラスを指定します。コントロール領域にはスタイルシートのcontrolsを指定します。

<div class="controls">～</div>

この<div>タグ内に<a>タグを指定します。<a>タグはページ内のアンカー(#ID名)を指定するだけで特にrel属性やclass属性を指定する必要はありません。Gliderにより自動的にスクリプトが設定されるためです。

実際に内容が表示される領域はスタイルシートのscroller、content、sectionを指定します。これらは以下のように順番に入れ子にする必要があります。

<div class="scroller">
        <div class="content">
            <div class="section" id="ID名">～</div>
        </div>
</div>

sectionクラスの<div>タグ内に実際に表示される内容を指定します。このsectionクラスの<div>タグにID名を割り当てておきます。このID名が<div class="controls">～</div>内で指定された<a>タグの飛び先(アンカー)になります。スライドさせるページが複数ある場合には<div class="content">～</div>の間にページの数だけ<div class="section" id="ID名">～</div>を入れます。ID名は同一ページ内で必ず異なるものにしてください。同じID名を割り当ててしまうと期待通りに動作しなくなります。

HTMLタグの設定が終わったら最後にGliderによるスライド処理が可能になるようにプログラムを記述します。プログラムではページが読み込まれた後に構築処理を行うようにするためwindow.onloadを使って以下のようにします。

<script type="text/javascript" charset="utf-8"><!--
        window.onload = function(){
            new Glider("glider1");
        }
// --></script>

new Glider()にスライド表示を行う領域のID名を指定します。サンプル01ではglider1なので、new Glider()のパラメータとして指定します。これで、スライド表示が可能になります。

サンプル01の実行結果

富士山の写真がスライドしてくる

適当なファイル名で下記ソースコードを.htmlで保存します。

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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(){
                    new Glider("glider1");
                }
            // --></script>
        </head>
        <body>
        <h1>Gliderサンプル</h1>
        <div id="glider1">
            <div class="controls">
                <a href="#page01">ページ 1</a> | 
                <a href="#page02">ページ 2</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>
            </div>
        </div>
        </body>
</html>