ゼロからはじめるslideViewer - 画像をスライド表示できるjQueryプラグイン

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

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

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

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

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

slideViewer

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

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

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

スタイルシートファイル

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

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

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