魅せる画像スライドショーJavaScript「jQuery GalleryView」

スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。
jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。

使用方法

jQuery GalleryViewからファイル一式をダウンロードします。
themesはjsと同じディレクトリにアップして下さい。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.galleryview-1.0.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#id名').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 100,
			frame_height: 100,
		});
	});
</script>

あとはid名で画像を記述すれば完成です。


<div id="id名" class="galleryview">
  //画像一枚目ここから
  <div class="panel">
     <img src="メイン画像パス" /> 
    <div class="panel-overlay">
      <h2>キャプション</h2>
    </div>
  </div>
  //画像一枚目ここまで（以下繰り返し）
　//サムネイル
  <ul class="filmstrip">
    //一枚目ここから
    <li><img src="サムネイル画像" alt="" /></li>
　　//一枚目ここまで
  </ul>
  //サムネイルここまで
</div>

追記（2009/09/10）：自動で始まるのを解除
transition_interval: 0