スライドショー的な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「jQuery GalleryView」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事:角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」
次の記事:フォントをJavaScriptで着飾る「JQuery FontEffect plugin」