ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」

ちょっとオシャレなあなたには、こんな画像の見せ方もいいのではないでしょうか?
jQueryプラグイン「desSlideshow」で一味違う画像ギャラリーを作ってみましょう。
ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」サンプル

使用方法
desSlideshowからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="desSlideshow.js"></script>
<script>
$(function(){
$("#id名").desSlideshow({
autoplay: 'enable',//自動再生enable,disable
slideshow_width: '550',//全体の幅
slideshow_height: '320',//全体の高さ
thumbnail_width: '150',//サムネイルの幅
time_Interval: '4000',//1枚の表示時間
directory: '/path/image/'// 画像を置いたディレクトリ
});
});
</script>
<style>
.desSlideshow{
background: url(loading.gif) center center no-repeat;
}
.desSlideshow .switchBigPic,.desSlideshow .nav{
display: none;
}
</style>

上記を記述したら、下記のように画像部分を書けば完成です。
<div id="id名" class="desSlideshow">
<div class="switchBigPic">
<!-- キャプションなし -->
<div>
<a href="#"><img class="pic" src="画像" /></a>
</div>
<!-- キャプションあり -->
<div>
<a href="#"><img class="pic" src="画像" /></a>
<p><strong>Description Title1</strong><br/>
Description Content1
</p>
</div>
</div>
<!-- ナビゲーション -->
<ul class="nav">
<li><a href="#">Slideshow1</a></li>
<li><a href="#">Slideshow2</a></li>
</ul>
</div>

ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」サンプル

sponsors

「ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」」をシェアする

記事作成:
記事URL:

TOP > > > ちょっとシャレた画像ギャラリーのjQueryプラグイン「desSlideshow」