skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

魅せる画像スライドショー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」サンプル

記事作成：2009年03月31日

前の記事：角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」
次の記事：フォントをJavaScriptで着飾る「JQuery FontEffect plugin」