Another Image gallery script. Thumnbails are listed inside a box at the left. You can click on the thumbnails to bring up a larger version in a right side panel. You can move between strip of thumbnails by clicking on left and right arrows.

dhtmlGoodiesで新しいライブラリが公開されました。



JavaScriptでサクサク動くイメージギャラリーを実装するのに役立ちます。

実装方法は、まず必要なJS/CSSファイルをインクルード後、
次のようなdiv要素を用意します。

<div class="strip_of_thumbnails"> </div>

そして、このdiv要素の中に次のタグを入れます。

<div><a onclick="showPreview('拡大画像へのURL',this);return false;"><img src="サムネイルのURL"></a></div>

HTMLタグの例）
<div class="strip_of_thumbnails">
<div><a id="firstThumbnailLink" href="#" onclick="showPreview('images/image1_big.jpg',this);return false;"><img src="images/image1.jpg"></a></div>
</div>

そして、ＨＴＭＬの最後に次のJavascriptコードを呼び出します。
windowのonloadイベントに設定してもよいでしょう。

<script type="text/javascript">
initGalleryScript(); // Initialize script
</script>

これはまた便利なライブラリですね。

関連エントリ
PHP+Ajaxで実装されたフォトギャラリー:pyxy-gallery
Plogger: オープンソースのフォトギャラリーシステム