javascript、multiboxを使ったちょっとクールなスライドショーの設置方法を説明します。
超使えるmultiboxの使い方をマスターしましょ〜。

バージョンが新しくなり、グループ化ができるので、1ページ中にいくつものスライドショーグループが設置可能になりました！
また、画像だけではなく、flvやらmp3、htmlやらほとんどどんなものでも表示できてしまいます。

Ajax（javascript）ライブラリはmootoolsを使ってます。

Sample

また、自分が運営しているサイトの中でPHPと連動させた例です。
こちらのサイトもご参考ください。

http://www.muay-thai-pck.com/fighter.php
こんな感じでいろんなものに応用できそうですね。

設置方法

ちなみにそこそこの知識がある方は、ダウンロードファイルを見ただけでなんとなく分かると思います。
なので、自信ある人は以下のダウンロード先からダウンロードしてファイルを見てみればわかると思うので、以下の記述はスルーでOK！

 

まず、下に書いでるサイトからファイル一式をダウンロードします。
ほんで、サイトん中の一番下の右側にある「Download new multiBox」がら一番新しいの（最新版）をダウンロードしてください。

multiboxダウンロード：http://www.liamsmart.co.uk/Downloads/multiBox/

 

ダウンロードしたファイルを解凍し、フォルダの中にhtmlファイルと、その他必要なファイルが入ってます。
それをダブルグリッグでブラウザで表示させてみましょう。（ブラウザで見れば、完成したhtmlファイルだってことがわかる）

それをDWやメモ帳で開いてみましょ。

このファイル自体は完成してるので、要はそっから必要な部分だけ抜き出せばOKってことです＾＾

参考までにヘッド部分に必要な記述は以下。// の後ろ部分はコメントなので、俺英語読めね〜しな人は削除しても構いません。

<link type="text/css" rel="stylesheet" href="Styles/multiBox.css" /> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="Styles/multiBoxIE6.css" /> <![endif]--> <script type="text/javascript" src="Scripts/mootools-1.2.3-core-yc.js"></script> <script type="text/javascript" src="Scripts/mootools-1.2.3.1-more-yc.js"></script> <script type="text/javascript" src="Scripts/overlay.js"></script> <script type="text/javascript" src="Scripts/multiBox.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ //call multiBox var initMultiBox = new multiBox({ mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files) container: $(document.body),//where to inject multiBox descClassName: 'multiBoxDesc',//the class name of the description divs path: 'Files/',//path to mp3 and flv players useOverlay: true,//use a semi-transparent background. default: false; maxSize: {w:800, h:600},//最大幅を指定します。適当でOK。（画像サイズは自動取得されます） addDownload: false,//do you want the files to be downloadable? addRollover: true,//add rollover fade to each multibox link addOverlayIcon: false,//画像につくアイコンの設定。falseにしたほうが良い。じゃないと画像を続けて書くと改行されてしまう addChain: true,//cycle through all images fading them out then in recalcTop: true,//subtract the height of controls panel from top position addTips: true//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips) }); }); </script>

ちなみにデフォルトのファイルからの変更点は以下。
1、maxSize: {w:800, h:600},//最大幅の指定 （もちろん単位はpxがんな！（栃木弁））
2、addDownload: false,//ダウンロードできるようにリンクを表示させるかどうか
3、addOverlayIcon: false,// 画像にアイコンを付けるかどうか。
の3箇所。この設定がお勧めです。

 

true、falseぐらいは聞いたことあっぺが？
プログラムで真だの偽だのいうやつですよ。まぁtrueはOK、falseはNoとぐらいに覚えとけばOKです。

 

1、は画像の最大幅。ちなみに画像のサイズは自動で取得されて、いい感じで表示してるから、ここは適当でOK。
あくまでこんぐらいのサイズまでなら表示してもいいかなぁっていう設定。
幅400pxの画像であれば当然400pxで表示されっから安心してけれ。
ここは適当に800ぐらいにしておげばいいと思うます。

 

2、はスライドショー内の画像をダウンロードできるようにするかどうかの設定。これいっか？いらね〜べ？
だからfalseにしておきましょう。わざわざ持ってってくださいなんて言うこともないと思うし。

 

3、はサムネイル画像（ページに表示される小さい画像のほう）に変な虫眼鏡みたいなセンス悪いアイコンつけるかどうかの設定。これもいらねんでね〜が？迷わずfalseで

 

あと大事なのが、<!--[if lte IE 6]>の部分。
これIE6だけに指定するものを書いてるやつ。（IE6のバグを利用して、IE6だけがこのCSSファイルを読み込む。ほかのブラウザはコメント扱いしてくれるから問題ない。IE6早くなぐなんね〜がな？まぁみんながバージョンアップすればいんだけど）
（ちなみにこのご時世今だに10％ぐらいの人がIE6を使ってるみたいだど・・・（俺含む＾＾；））

 

気を付けないといけないのがこの部分、絶対に間違えないようにしてください。
IE6はバグの塊である上にpngファイルの透明化がきかないから、なんとかかんとか無理やりに透明化させてます。

ほんで、multiBoxIE6.cssを開くと、そこに画像ファイルのパスが書いてるけど、これはこのCSSファイルからのパスでなく、htmlファイルからのパスだがら気をつけてくらさい。

 

（※超重要！！2009.1030追記）
multiBoxIE6.cssにはデフォルトで以下のような記述が複数記述されてるけど、src=のパス記述部分の先頭のスラッシュを取らないとIE6ではNextボタンなどが表示されないので、ご注意ください！(削除必要6箇所アリ）

以下記述部分のimagesの前の/（スラッシュ）のことです。このスラッシュが曲者。必ずとりましょ〜）
（今までこのサイトでは絶対パスで記述してたので気づかなかった・・・。てか配布元も少しは考えてほしかったな・・・（ボソ

.MultiBoxClose{
 background:none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/Images/mb_Components/close.png', sizingMethod='image');
}

↓変更後（ / を1箇所外しただけ）

.MultiBoxClose{
 background:none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='Images/mb_Components/close.png', sizingMethod='image');
}

//////// 追記ここまで ///////////

 

とにかく、むやみにファイルの場所を移動（フォルダを変えたり）すんなってことですね。移動しなければ基本的にパス関係はそのままで問題ないです。
IE6は使ってないから確認しよ〜がないって？IEtesterでも入れときましょ〜！
IEtesterはこちら（IE6〜IE8まで同時に起動し、確認できるすぐれもの。もちろんフリーソフト（無料））

とりあえずヘッド部分はこのぐらいかな。

いよいよbody部分。もうすぐ終わります。

必要なのは以下。こんだけ。

<a href="Images/large1.jpg" _fcksavedurl="Images/large1.jpg" id="mb1" class="mb" title="Image 1" rel="[images]"><img src="Images/small1.jpg" _fcksavedurl="Images/small1.jpg" alt="Image 1" title="Image 1" /></a> <div class="multiBoxDesc mb1 mbHidden">ここの文字が画像の下に表示される。説明書きなどを書くといいかも。書かなくてもOK。</div>

aのhrefで大きいほうの画像を指定する。
あとは以下。
idの指定、当然画像が増えればmb1、mb2のようにする必要があります。idはそのページ内で1回しか使えませんので。
class（クラス）も指定する。これはすべてmbのままでOK。
titleが画像の下に表示されるタイトルになる。（※ここ重要）

rel=はグループの指定を行う。これはたとえばページ内にうちの猫のスライドショー、旅行のスライドショー・・・みたいに1ページ中にいくつかにカテゴリをわけて使いたい場合に、グループごとに別の名前を指定してやると、ちゃんとグループごとにスライドショーができるようになります。（必要ない場合は記入しなくてOK）
じゃないと、スライドショーをはじめると、そのページ内すべての画像がスライドショーで表示されてしまいます。
必ず[ と ]で囲ってやる必要があるので注意。また半角英語で書くのが無難。ほかは試してないけど・・・。 まぁ普通に考えれば当然かと。

imgタグは普通にページ内に表示させたい画像を指定する。当たり前だけど。

また、以下が重要。

<div class="multiBoxDesc mb1 mbHidden">・・・</div>
この部分も必ず必要。aの数だけ必要で、mbのところがmb1、mb2とアンカー(a）で指定したidの名前を指定してやります。
要はアンカー（a)の数だけ必要ということ。ただ実際はこの部分はページ内では表示させる必要はないので、display:noneの指定をされていますので、ブラウザ上には表示されません。あくまでスライドショー時のみ表示させる役割を持ってます。

 

スライドショーなので、実際は1枚ってことは無いだろうから、下のような感じになることが多いと思うので、参考までに。

<p><a href="img/java/1.jpg" _fcksavedurl="img/java/1.jpg" id="mb1" class="mb" rel="[neko]" title="スライドショーサンプル"><img src="img/java/s-1.jpg" _fcksavedurl="img/java/s-1.jpg" alt="スライドショーサンプル" width="120" height="80" /></a> <a href="img/java/2.jpg" _fcksavedurl="img/java/2.jpg" id="mb2" class="mb" rel="[neko]" title="スライドショーサンプル"><img src="img/java/s-2.jpg" _fcksavedurl="img/java/s-2.jpg" alt="スライドショーサンプル" width="120" height="80" /></a> <a href="img/java/3.jpg" _fcksavedurl="img/java/3.jpg" id="mb3" class="mb" rel="[neko]" title="スライドショーサンプル"><img src="img/java/s-3.jpg" _fcksavedurl="img/java/s-3.jpg" alt="スライドショーサンプル" width="120" height="80" /></a></p> <div class="multiBoxDesc mb1">photo1</div> <div class="multiBoxDesc mb2">photo2</div> <div class="multiBoxDesc mb3">photo3</div>

こんな感じになるかと思います。まぁこのページのソースを見れば同じことだけど・・・。
あ〜なんかなまりが取れた！いつのまにか成長していたよ＼(^o^)／ 

あと、ちなみにほかのライブラリとは基本的に共存できませんので、ご注意ください。
たとえばjQueryやprototype、lightbox、greyboxなど。
なんかすればできたような気がしますが・・・。