KOMOREBI || blog

(X)HTMLは、通常の<li>要素内に<img>要素を<a>で囲むシンプルなソース。
ギャラリーが複数ある場合は、<ul>要素の入れ子になります。

<div id="gallery">
 <ul>
  <li id="first"><a>Vacation Gallery1</a>
   <ul>
     <li class="overview">グルーピング説明文</li>
     <li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
     <li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
  </ul>
  </li>
 </ul>
 <ul>
  <li id="first"><a>Food Pictures</a>
   <ul>
     <li class="overview">グルーピング説明文</li>
     <li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
     <li><a rel="lightbox[グルーピング名]" title="画像説明"><img /></a></li>
  </ul>
  </li>
 </ul>
</div>

ソースの属性を一部省略しましたが、ナビゲーションの構造は<ul>要素のID="gallery"を指定してあげれば、CSSが効くようになっていて、一部画像を換装すれば"Suckerfish HoverLightbox "の見せ方もカスタマイズできるみたいです。
折りたたみなどの動きは、もちろんJavaScriptです。

画像とグルーピングの説明には、class="overview"を<li>要素に追加すればOK。
#画像の一覧と上記説明文が同じ<li>要素でよいのか・・・という疑問は、ひとまずスルーしときましょう。

意外にサムネイル一覧というのは、画像を小さくさせども場所をそれなりにとりますし、数が多くなる人なんかいんはこんなプルダウンっぽいギャラリーサムネイルもいいかもしれませんね。
例えば、イベントや旅行の写真一覧をブログのレポート上に置く場合とかに、場所とらずにギャラリーを見せられそうです。
日付ごとや場所ごとなどのグルーピングで分けてもイイ訳ですよ。

» Suckerfish HoverLightbox Redux ファイルの一式ダウンロードなどはこちら