HTMLタグの準備とgliderの組み込み
gliderライブラリを使うには、あらかじめ決められたフォーマットに従ってHTMLタグを書く必要があります。
初めに、<div>タグでスライドする内容とタブを囲み、ID名を付けておきます。ここで付けたID名が、ライブラリで操作する場所を示します。
次に、タブ（コンテンツを切り替えるためのリンクになる部分）を<div class="controls">～</div>内に書きます。タブとなる文字や画像は、<a>タグで囲み、href属性に表示させたいスライドに対応するアンカー名を書きます。アンカー名は、実際にはスライドの内容を含む<div>タグのID名です。たとえば、<a href="#book01">であれば、クリックした時には、<div id="book01">の内容が表示される、といった具合です。タブは必要な数だけ書きます。
最後は、スライドする内容部分の定義です。<div class="scroller"><div class="content">～</div></div>とし、<div class="content">～</div>の中にスライドさせる内容を指定します。内容は以下の形式で指定します。
<div class="section" id="●●●">
スライドする内容
</div>
ここで指定したID名が、先に説明した<a href="#●●●">に対応することになります。
以下が、ここまでのHTMLソースコードです。
<div id="book_review">
<div class="controls">
<a href="#book01">動物の描き方</a>｜
<a href="#book02"> サラリーマン合気道</a>｜
<a href="#book03">凡人として生きるということ</a>
</div>
<div class="scroller">
<div class="content">
<div class="section" id="book01">
<img src="images/1.jpg" width="384" height="216" align="left" alt="動物の描き方" title="動物の描き方"><h2>動物の描き方</h2><p>Amazonって商品を検索しただけでも、延々とオススメの品が画面に出ますよね。ふとしたことから見つけて取り寄せた、この黄色い本。ブックレビューにかつてないほどの真実味のある言葉が並んでいたので、ついついポチッと押してしまったわけですが、その中身たるや！まあ、まずは見てください……続きを読む＞＞＞</p><br clear="left">
</div>
<div class="section" id="book02">
<img src="images/2.jpg" width="384" height="216" align="left" alt="サラリーマン合気道" title="サラリーマン合気道"><h2>サラリーマン合気道 </h2><p>著者の箭内さんは、「風とロック」というフリーペーパーの制作代表であり、テレビCM（東京メトロの、DO! TOKYO HEARTとか）ディレクター、NHKの番組での司会など多方面で活躍されています……続きを読む＞＞＞</p><br clear="left">
</div>
<div class="section" id="book03">
<img src="images/3.jpg" width="384" height="216" align="left" alt="凡人として生きるということ" title="凡人として生きるということ"><h2>凡人として生きるということ</h2><p>押井守というと、うる星やつら、機動警察パトレイバー、攻殻機動隊などの監督作品が有名ですが、このような映画を生み出してきた監督が、どんなことを考えているのか？ 映画についてでもなく、押井守の根本についてまとめられている本です。……続きを読む＞＞＞</p><br clear="left">
</div>
</div>
</div>
</div>
あとはスクリプトファイルを読み込ませれば、一応できあがりです。これまでと同様に、<script>タグでスクリプトファイルを「prototype.js」「effects.js」「glider.js」の順番に読み込ませます（effect.jsはScript.aculo.usのエフェクトを処理するファイルです）。読み込ませただけでは実行されないので、以下のようなスクリプトを書いてスライドを機能させます。
Event.observe(window, "load",
function(){
new Glider("book_review");
}
, false);
「new Glider()」のパラメータにはスライド全体を囲んでいる<div>タグのID名を指定します。作例では「book_review」というID名なので、「new Glider("book_review")」としてスライドできるようにしています。「Event.observe()」は、Prototype.jsライブラリの専用メソッド（命令）で、指定したオブジェクトにイベントを追加するものです。今回の場合は、「window.onload = function(){ new Glider("book_review"); }」としても構いません。
ただ、複数のライブラリを使うような場合、「window.onload」ではすでに設定されたイベント処理を上書きしてしまう恐れがあります。その点、「Event.observe()」を使えば、上書きしてしまう心配がありません。
