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

スライドショー的な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

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

sponsors

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

記事作成:
記事URL:

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