スライド領域の横幅と縦幅を指定する

スライド表示領域のサイズはデフォルトで635×300ピクセルになっています。このサイズではなく任意のサイズにすることもできます。Gliderの表示領域のサイズはglider.cssファイル内に記述されていますので、635px、300pxの値が書かれている部分を書き換えてしまう方法もあります。ただ、そのような方法は好ましくないのでスタイルシートの値を上書きするようにページ内で指定を行います。表示領域はdiv.scrollerのwidthとheightに値を指定すればよいので320×240pxにする場合は以下のようにします(サンプル02)。

<style type="text/css"><!--
        div.scroller {
            width:320px;
            height:240px;
        }
--></style>

サンプル02の実行結果

Gliderはprototype.jsライブラリのバージョン1.5.1以降を利用しており、プログラム内で$$()を使うことで以下のように表示領域サイズを変更できます。

window.onload = function(){
        new Glider("glider1");
        $$("div.scroller")[0].style.width = "320px";
        $$("div.scroller")[0].style.height = "240px";
}

$$()のパラメータには設定したいスタイルシートのセレクタを指定します。$$()は該当するタグを配列として返します。サンプル03では1つしか領域がないので$$("div.scroller")[0]と指定することで一番最初の表示領域を指し示すことができます。この領域のスタイル属性であるwidthプロパティ、heightプロパティに横幅と縦幅を設定します。

サンプル03の実行結果

サンプル02

<!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>
            <style type="text/css"><!--
                div.scroller {
                    width:320px;
                    height:240px;
                }
            --></style>
        </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>

サンプル03

<!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");
                    $$("div.scroller")[0].style.width = "320px";
                    $$("div.scroller")[0].style.height = "240px";
                }
            // --></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>