[GalleryView] 画像をクールに魅せるjQueryプラグイン

画像をカッコ良く見せるためのjQueryプラグインは数あれど、これはなかなかスゴい。

GalleryView
http://www.spaceforaname.com/jquery/galleryview

いわゆるLightbox系のような、サムネイルをクリックすると大きな画像を前面に表示するタイプとは違う。
どういうものかはこちらのデモを見てもらえれば一目瞭然だろう。

HTML

<div id="photos" class="galleryview">
  <div class="panel">
    ...
    <img src="http://www.blogger.com/img/gallery/02.jpg" />
    <div class="panel-overlay">
      <h2>Eden</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.
      View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
    </div>
    ...
  </div>

  <ul class="filmstrip">
...
    <li><img src="http://www.blogger.com/img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
...
  </ul>
</div>

Javascript

$('#photos').galleryView({
 panel_width: 800,
 panel_height: 300,
 frame_width: 100,
 frame_height: 100,
});

プラグイン内でデザイン面のコーディングも行っているので別途CSSを指定しなくてもデモのような画面を描画できる。
(もちろん自分でカスタマイズも可能)

特徴的なのは、デフォルトでjQuery Timersを利用して一定時間ごとに画像を切り替える仕様になっているところ。
（オプションでタイマー利用の有無や切り替えの周期をコントロールすることは可能）


プラグインのホームページにはダウンロードのリンクが見つからなかったので、利用する場合は
こちらからダウンロード


気に入ったのでLibroSpotのトップページで使ってみました。