• 画像のキャプションその1
    リンクもOK
  • 画像のキャプションその2
  • 画像のキャプションその3
  • 画像のキャプションその4
  • 画像のキャプションその5
  • 画像のキャプションその6
Image of

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

  • files
  • js
  • html
<link href="<PATH>/jquery.popeye.css" rel="stylesheet" />
<link href="<PATH>/jquery.popeye.style.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.popeye-2.1.min.js"></script>
<script>
	$(window).load(function(){
		$('#ppy1').popeye();
		$('#ppy2').popeye({
			caption:    false,
            navigation: 'permanent',
            direction:  'left'
		});
		$('#ppy3').popeye({
			caption:    'permanent',
            opacity:    1,
			direction: 'left'
		});
	});
</script>
<div class="ppy" id="ppy1">
	<ul class="ppy-imglist">
		<li>
			<a href="<PATH>/img08.jpg" title="img01"><img src="<PATH>/img08.jpg" alt=""></a>
			<span class="ppy-extcaption">画像のキャプションその1<br /><a href="#">リンクもOK</a></span>
		</li>
		<li>
			<a href="<PATH>/img03.jpg" title="img02"><img src="<PATH>/img03.jpg" alt=""></a>
			<span class="ppy-extcaption">画像のキャプションその2</span>
		</li>
		<li>
			<a href="<PATH>/img12.jpg" title="img03"><img src="<PATH>/img12.jpg" alt=""></a>
			<span class="ppy-extcaption">画像のキャプションその3</span>
		</li>
		<li>
			<a href="<PATH>/img16.jpg" title="img04"><img src="<PATH>/img16.jpg" alt=""></a>
			<span class="ppy-extcaption">画像のキャプションその4</span>
		</li>
		<li>
			<a href="<PATH>/img10.jpg" title="img05"><img src="<PATH>/img10.jpg" alt=""></a>
			<span class="ppy-extcaption">画像のキャプションその5</span>
		</li>
		<li>
			<a href="<PATH>/img18.jpg" title="img06"><img src="<PATH>/img18.jpg" alt=""></a>
			<span class="ppy-extcaption">画像のキャプションその6</span>
		</li>
	</ul>
	<div class="ppy-outer">
		<div class="ppy-stage">
			<div class="ppy-nav">
				<a class="ppy-prev" title="Previous image">Previous image</a>
				<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
				<a class="ppy-switch-compact" title="Close">Close</a>
				<a class="ppy-next" title="Next image">Next image</a>
			</div>
		</div>
	</div>
	<div class="ppy-caption">
		<div class="ppy-counter">
			Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong>
		</div>
		<span class="ppy-text"></span>
	</div>
</div>


<div class="ppy" id="ppy2">
	<ul class="ppy-imglist">
		<li>
			<a href="<PATH>/img12.jpg" title="img01"><img src="<PATH>/img12.jpg" alt=""></a>
		</li>
		<li>
			<a href="<PATH>/img09.jpg" title="img02"><img src="<PATH>/img09.jpg" alt=""></a>
		</li>
		<li>
			<a href="<PATH>/img15.jpg" title="img03"><img src="<PATH>/img15.jpg" alt=""></a>
		</li>
		<li>
			<a href="<PATH>/img07.jpg" title="img04"><img src="<PATH>/img07.jpg" alt=""></a>>
		</li>
		<li>
			<a href="<PATH>/img03.jpg" title="img05"><img src="<PATH>/img03.jpg" alt=""></a>
		</li>
		<li>
			<a href="<PATH>/img01.jpg" title="img06"><img src="<PATH>/img01.jpg" alt=""></a>
		</li>
	</ul>
	<div class="ppy-outer">
		<div class="ppy-stage">
			<div class="ppy-counter">
				<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
			</div>
		</div>
		<div class="ppy-nav">
			<div class="nav-wrap">
				<a class="ppy-next" title="Next image">Next image</a>
				<a class="ppy-prev" title="Previous image">Previous image</a>
			</div>
		</div>
	</div>
</div>


<div class="ppy" id="ppy3">
	<ul class="ppy-imglist">
		<li>
			<a href="<PATH>/img17.jpg" title="img01"><img src="<PATH>/img06.jpg" alt="alt属性の値を表示その1"></a>
		</li>
		<li>
			<a href="<PATH>/img16.jpg" title="img02"><img src="<PATH>/img06.jpg" alt="alt属性の値を表示その2"></a>
		</li>
		<li>
			<a href="<PATH>/img15.jpg" title="img03"><img src="<PATH>/img04.jpg" alt="alt属性の値を表示その3"></a>
		</li>
		<li>
			<a href="<PATH>/img14.jpg" title="img04"><img src="<PATH>/img03.jpg" alt="alt属性の値を表示その4"></a>
		</li>
		<li>
			<a href="<PATH>/img13.jpg" title="img05"><img src="<PATH>/img02.jpg" alt="alt属性の値を表示その5"></a>
		</li>
		<li>
			<a href="<PATH>/img12.jpg" title="img06"><img src="<PATH>/img01.jpg" alt="alt属性の値を表示その6"></a>
		</li>
	</ul>
	<div class="ppy-outer">
		<div class="ppy-stage">
			<div class="ppy-nav">
				<div class="nav-wrap">
					<a class="ppy-prev" title="Previous image">Previous image</a>
					<a class="ppy-play" title="Play Slideshow">Play Slideshow</a>
					<a class="ppy-pause" title="Stop Slideshow">Stop Slideshow</a>
					<a class="ppy-next" title="Next image">Next image</a>
				</div>
			</div>
			<div class="ppy-counter">
				<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
			</div>
		</div>
		<div class="ppy-caption">
			<span class="ppy-text"></span>
		</div>
	</div>
</div>

popeyeについて

popeyeは、よくあるモーダル、ポップアップとは一味違うプラグインです。
他のモーダルプラグインに飽きたなら一度試してみてはどうですか?
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL v2
対応ブラウザ

関連するjQueryプラグイン

  • Boxer

    Boxer

    シンプルなモーダルを設置できる

  • MagnificPopup

    MagnificPopup

    画像、フォーム、動画などをモーダルで表示できる

  • photobox

    photobox

    とりあえずイケてます

  • Colorbox

    Colorbox

    簡単にモーダル、ポップアップウィンドウを設置することができる

  • custombox

    custombox

    豊富なアクションを持つモーダルを設置できる