数あるスライドショーのスクリプトの中でもなかなか使いやすくお勧めなのが、JonDesign's SmoothGalleryです。Flashベースの画像スライドショーよりも簡単に設置できてソースも軽いAjaxで作られています。対応ブラウザーは以下の通り。

• Firefox
• Opera
• Internet Explorer 6 and 7
• Safari

　つまり、殆どの有名ブラウザーで機能します。たぶんGoogle Chromeでも動くと思います。（確認していません。）

　Ajaxで作られているのでPHPやPerlなどのその他のスクリプトとも親和性が高いです。というより、単にソースコードから画像をパスで呼び出すだけなのでどんなスクリプトとも文字列の読み書きだけで合体できます。僕が試したやり方ではxmlから画像のアップロード情報を読み込んでphpで出力してこのAjaxのスライドショーを出力する...といったものですが、なかなかいいです。

基本的な使い方

ダウンロード

　ダウンロードページに進み、Download JonDesign's Smooth Gallery 2.0 in Zip Formatをダウンロードすれば問題ないと思います。（自分の好みで適当にダウンロードしてください。）SmoothGallery-2.0.zipというファイルがダウンロードされますので、適当な場所で解凍します。

デモ画面

　解凍したフォルダーを丸ごとサーバーなどにアップロードします。そしてフォルダーの中にあるdemo.htmlにアクセスしてください。すでにサンプルとして格納されている画像がデモ画面としてスライドショーで閲覧できます。デモ画面のサンプルが複数あるのでいろいろ試してみてください。

• ./SmoothGallery-2.0/demo.html
• ./SmoothGallery-2.0/democontinuous.html
• ./SmoothGallery-2.0/demogroup.html
• ./SmoothGallery-2.0/demohistory.html
• ./SmoothGallery-2.0/demohistorygroup.html
• ./SmoothGallery-2.0/demoslide.html

画像のアップ

　スライドショーにしたい画像は、./imagesフォルダーにアップロードします。（画像の大きさなどを整えた方がいいかも。）画像はサムネイルと本画像の二つを入れておきます。ファイル名は任意ですが、サンプルでは<ファイル名>.jpgと<ファイル名>-mini.jpgになっています。HTMLに書き出す際にファイル名を指定すればよいだけなのでファイル名は何でもいいです。またHTMLでは、classでもって"full"と"thumbnail"にわけて表示しています。HTMLとしては謎のソースですがAjaxが読み込んで使うのでこれで大丈夫なのです。

<div class="imageElement">
    <h3>Item 5 Title</h3>
    <p>Item 5 Description</p>
        <a href="#" title="open image" class="open"></a>
        <img src="images/brugges2006/5.jpg" class="full" />
        <img src="images/brugges2006/5-mini.jpg" class="thumbnail" />
</div>