slideViewerは、Ajaxライブラリ「jQuery」のプラグインとして機能する画像スライドライブラリです。

slideViewerはサムネール画像が不要で、表示する画像の番号が自動生成されます。枚数がやや多い画像を表示するような場合に便利です。

本稿で紹介するslideViewerサンプルの1つ。画像の下にある番号をクリックすると画像がスライドして表示されます

slideViewerは<ul><li>タグに表示する画像を列記するだけですので非常に手軽に使えます。その際に、<ul><li>タグにはID名やクラス名を新たに割り当てることもしませんので、既存の(X)HTMLタグ構成のまま利用できるのも利点の1つです。また、slideViewerではページ内にある複数の領域をスライド表示できます。

関連ファイルの入手

slideViewerは、jQueryなどを含めた全てのファイルを一括取得する方法が用意されていません。このため、jQuery、jQuery Easing Plugin、slideViewerを個別にダウンロードする必要があります。

またスタイルシートのファイルもないため、上記slideViewerサイトから基本スタイルシートをコピーし、新たにスタイルシートファイルとして用意する必要があります(後述)。

jQuery

jQueryは、このURLから入手可能です。ページ下の「Download jQuery」のカテゴリ内にある3種類のjQueryのいずれかをダウンロードします。ここで解説しているサンプルプログラムでは非圧縮のファイルを利用しています(Download jQuery 1.2.1 (77kb, Uncompressed)のファイル)。

なお、この非圧縮のファイルはGoogleのサイトからも入手できます。jquery-1.2.1.jsのリンク文字をクリックするとダウンロードできます。

jQueryのサイト	Googleのサイトでは、jquery-1.2.1.jsのリンク文字をクリックしjQueryをダウンロードします

jQuery Easing Plugin

次に、「jQuery Easing Plugin」(Easingプラグイン)を入手します。ダウンロードは、このURLから行えます。

「jquery.easing.1.2.js」と書かれた文字上で右クリックし、ダウンロード(ディスクに保存)します。

jquery.easing.1.2.jsのリンク文字上で右クリックしてjQuery Easingプラグインをダウンロード(ディスクに保存)

slideViewer

slideViewerサイトからslideViewerを入手します。

slideViewerサイトのページ上にある「slideViewer 1.1」の文字上で右クリックしてダウンロード(ディスクに保存)します。

ダウンロードしたファイルは、jsフォルダなどにまとめて入れておきます。

slideViewerのサイト	「slideViewer 1.1」のリンク文字上でマウスの右ボタンをクリックしてslideViewer.jsをダウンロード(ディスクに保存)

スタイルシートファイル

スタイルシートファイルとして、slideViewerサイトの「slideViewer's basic CSS: a bunch of classes」直下にある枠で囲まれたスタイルシート部分を利用します。

このスタイルシート部分をコピーし、「slideviewer.css」という名前で保存しておきます。また、ページのデザインに合わせて変更しておくのもよいでしょう。

以下の画像が、ここまでで入手したファイルを基に作成した、本稿サンプルのファイル / およびフォルダ構成となります。

本稿のサンプルで使用しているファイル / フォルダ構成。main.cssはh1タグのみの装飾指定を行なっています