スライド領域の横幅と縦幅を指定する
スライド表示領域のサイズはデフォルトで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>
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プロパティに横幅と縦幅を設定します。
サンプル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>