Description Title1
Description Content1

Description Title3
Description Content3

Description Title4
Description Content4

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/style.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/desSlideshow.js"></script>
<script>
	$(window).load(function(){
		$("#desSlideshow1").desSlideshow({
            autoplay: 'enable',//option:enable,disable
            slideshow_width: '600',//slideshow window width
            slideshow_height: '250',//slideshow window height
            thumbnail_width: '200',//thumbnail width
            time_Interval: '4000',//Milliseconds
			directory:' [jplugin]/img-gallery/desSlideshow/images/'// flash-on.gif and flashtext-bg.jpg directory
        });
	});
</script>



//desSlideshow.jsの86行目-89行目を以下に変更すると、アニメーションがスムーズになります。
g.find(".switchBigPic").children("div").stop(false, true).fadeOut();
g.find(".switchBigPic").children("div").eq(current).stop(false, true).fadeIn();
g.find(".nav").children("li").eq(current).stop(false, false).animate({marginLeft: '-35px'}, "fast");
g.find(".nav").children("li").eq(w).stop(false, false).animate({marginLeft: '0px'}, "fast");
<div id="desSlideshowDemo" class="desSlideshow">
	<div class="switchBigPic">
		<div>
			<img class="pic" src="<PATH>/img15.jpg" />
			<p><strong>Description Title1</strong><br/>Description Content1</p>
		</div>
		<div><img class="pic" src="<PATH>/img12.jpg" /></div>
		<div>
			<img class="pic" src="<PATH>/img11.jpg" />
			<p><strong>Description Title3</strong><br/>Description Content3</p>
		</div>
		<div>
			<img class="pic" src="<PATH>/img16.jpg" />
			<p><strong>Description Title4</strong><br/>Description Content4</p>
		</div>
	</div>
	<ul class="nav">
		<li><a href="#">Slideshow1</a></li>
		<li><a href="#">Slideshow2</a></li>
		<li><a href="#">Slideshow3</a></li>
		<li><a href="#">Slideshow4</a></li>
	</ul>
</div>

desSlideshowについて

desSlideshowは、他の画像ギャラリーとは一味違う画像ギャラリープラグインです。
設置も簡単で、軽量です。
DLしてきたjsファイルをそのまま使うと、画像切り替え用の要素上でマウスを動かしまくると、
アニメーションが遅延して、いつまでも終わらないという状態になってしまうので、上のソースコードのjsに書いているように 修正すればスムーズなアニメーションになります。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスApache v2
対応ブラウザ

関連するjQueryプラグイン

  • simpleGal

    simpleGal

    simpleGalはとてもシンプルは画像ギャラリー

  • Craftyslide

    Craftyslide

    とても簡単に設置できる画像ギャラリー

  • least

    least

    印象的な画像ギャラリーを設置することができる

  • PresentationCycle

    PresentationCycle

    画像の切り替わるタイミングをバーで表示できる画像ギャラリー

  • JustifiedGallery

    JustifiedGallery

    画像を隙間なく配置してくれる