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プラグイン

  • least

    least

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

  • Rondell

    Rondell

    奥行きのある画像ギャラリーが設置できる

  • AppleStyleSlideshowGallery

    AppleStyleSlideshowGallery

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

  • simpleGal

    simpleGal

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

  • cycle2

    cycle2

    非常に多機能な画像ギャラリー