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

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

sponsors

使用方法

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

サンプル

Effet du soleil sur le paysage

Photo by tomharry. View full-size photo here.

Eden

Photo by emsago. View full-size photo here.

Snail on the Corn

Photo by baines. View full-size photo here.

Flowers

Photo by jazza. View full-size photo here.

Alone Beach 2B

Photo by sgursozlu. View full-size photo here.

Sunrise Trees

Photo by a_glitch. View full-size photo here.

Waterfall

Photo by thesaint. View full-size photo here.

Death Valley

Photo by djkmart. View full-size photo here.

sponsors

Javascriptサンプルページ一覧
skuare.net