img01キャプションテキスト

img01

img02キャプションテキスト

img02

img03キャプションテキスト

img03

img04キャプションテキスト

img04

img05キャプションテキスト

img05

img06キャプションテキスト

img06

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

  • files
  • js
  • html
<link href="<PATH>/presentationCycle.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.cycle.all.min.js"></script>
<script src="<PATH>/presentationCycle.js"></script>
<script>
	$(window).load(function(){
		presentationCycle.init();
	});
</script>
<div id="presentation_container" class="pc_container">
	<div class="pc_item">
		<div class="desc">
			<p>img01キャプションテキスト</p>
		</div>
		<img src="<PATH>/img05.jpg" alt="img01" />
	</div>
	<div class="pc_item">
		<div class="desc">
			<p>img02キャプションテキスト</p>
		</div>
		<img src="<PATH>/img07.jpg" alt="img02" />
	</div>
	<div class="pc_item">
		<div class="desc">
			<p>img03キャプションテキスト</p>
		</div>
		<img src="<PATH>/img01.jpg" alt="img03" />
	</div>
	<div class="pc_item">
		<div class="desc">
			<p>img04キャプションテキスト</p>
		</div>
		<img src="<PATH>/img17.jpg" alt="img04" />
	</div>
	<div class="pc_item">
		<div class="desc">
			<p>img05キャプションテキスト</p>
		</div>
		<img src="<PATH>/img13.jpg" alt="img05" />
	</div>
	<div class="pc_item">
		<div class="desc">
			<p>img06キャプションテキスト</p>
		</div>
		<img src="<PATH>/img15.jpg" alt="img06" />
	</div>
</div>

PresentationCycleについて

PresentationCycleは、画像の切り替わるタイミングをバーで表示できる画像ギャラリーです。
js実行時にオプションを指定するタイプではなく、プラグインファイル内に直接設定を書き込む必要があります。
またcycle.jsも同時に読み込む必要があるので要注意です。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • AppleStyleSlideshowGallery

    AppleStyleSlideshowGallery

    キレイ目な画像ギャラリーを簡単に設置できる

  • Orbit

    Orbit

    画像の切り替えタイミングを見た目で表示できる画像ギャラリー

  • desSlideshow

    desSlideshow

    一味違う画像ギャラリー

  • SlideScale

    SlideScale

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

  • JustifiedGallery

    JustifiedGallery

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