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

  • files
  • js
  • html
<link href="<PATH>/photobox.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.photobox.js"></script>
<script>
	$(window).load(function(){
		$('#photoboxDemo').photobox('a', {thumbs:true});
	});
</script>
<ul id="photoboxDemo">
	<li class="loaded"><a href="<PATH>/img01.jpg"><img src="<PATH>/img01.jpg" title="img01"></a></li>
	<li class="loaded"><a href="<PATH>/img02.jpg"><img src="<PATH>/img02.jpg" title="img02"></a></li>
	<li class="loaded"><a href="<PATH>/img03.jpg"><img src="<PATH>/img03.jpg" title="img03"></a></li>
	<li class="loaded"><a href="<PATH>/img04.jpg"><img src="<PATH>/img04.jpg" title="img04"></a></li>
	<li class="loaded"><a href="<PATH>/img05.jpg"><img src="<PATH>/img05.jpg" title="img05"></a></li>
	<li class="loaded"><a href="<PATH>/img06.jpg"><img src="<PATH>/img06.jpg" title="img06"></a></li>
	<li class="loaded"><a href="<PATH>/img07.jpg"><img src="<PATH>/img07.jpg" title="img07"></a></li>
	<li class="loaded"><a href="<PATH>/img08.jpg"><img src="<PATH>/img08.jpg" title="img08"></a></li>
	<li class="loaded"><a href="<PATH>/img09.jpg"><img src="<PATH>/img09.jpg" title="img09"></a></li>
	<li class="loaded"><a href="<PATH>/img10.jpg"><img src="<PATH>/img10.jpg" title="img10"></a></li>
	<li class="loaded"><a href="<PATH>/img11.jpg"><img src="<PATH>/img11.jpg" title="img11"></a></li>
	<li class="loaded"><a href="<PATH>/img12.jpg"><img src="<PATH>/img12.jpg" title="img12"></a></li>
	<li class="loaded"><a href="<PATH>/img14.jpg"><img src="<PATH>/img14.jpg" title="img14"></a></li>
	<li class="loaded"><a href="<PATH>/img15.jpg"><img src="<PATH>/img15.jpg" title="img15"></a></li>
	<li class="loaded"><a href="<PATH>/img16.jpg"><img src="<PATH>/img16.jpg" title="img16"></a></li>
	<li class="loaded"><a href="<PATH>/img17.jpg"><img src="<PATH>/img17.jpg" title="img17"></a></li>
	<li class="loaded"><a href="<PATH>/img18.jpg"><img src="<PATH>/img18.jpg" title="img18"></a></li>	
	<li class="loaded"><a href="<PATH>/imgb01.jpg"><img src="<PATH>/imgb01.jpg" title="imgb01"></a></li>
	<li class="loaded"><a href="<PATH>/imgb02.jpg"><img src="<PATH>/imgb02.jpg" title="imgb02"></a></li>
	<li class="loaded"><a href="<PATH>/imgb03.jpg"><img src="<PATH>/imgb03.jpg" title="imgb03"></a></li>
	<li class="loaded"><a href="<PATH>/imgb04.jpg"><img src="<PATH>/imgb04.jpg" title="imgb04"></a></li>
	<li class="loaded"><a href="<PATH>/imgb05.jpg"><img src="<PATH>/imgb05.jpg" title="imgb05"></a></li>
	<li class="loaded"><a href="<PATH>/imgb06.jpg"><img src="<PATH>/imgb06.jpg" title="imgb06"></a></li>
	<li class="loaded"><a href="<PATH>/imgb07.jpg"><img src="<PATH>/imgb07.jpg" title="imgb07"></a></li>
	<li class="loaded"><a href="<PATH>/imgb08.jpg"><img src="<PATH>/imgb08.jpg" title="imgb08"></a></li>
	<li class="loaded"><a href="<PATH>/imgb09.jpg"><img src="<PATH>/imgb09.jpg" title="imgb09"></a></li>
	<li class="loaded"><a href="<PATH>/imgb10.jpg"><img src="<PATH>/imgb10.jpg" title="imgb10"></a></li>
	<li class="loaded"><a href="<PATH>/imgd01.jpg"><img src="<PATH>/imgd01.jpg" title="imgd01"></a></li>
	<li class="loaded"><a href="<PATH>/imgd02.jpg"><img src="<PATH>/imgd02.jpg" title="imgd02"></a></li>
	<li class="loaded"><a href="<PATH>/imgd03.jpg"><img src="<PATH>/imgd03.jpg" title="imgd03"></a></li>
	<li class="loaded"><a href="<PATH>/imgd04.jpg"><img src="<PATH>/imgd04.jpg" title="imgd04"></a></li>
	<li class="loaded"><a href="<PATH>/imgd05.jpg"><img src="<PATH>/imgd05.jpg" title="imgd05"></a></li>
	<li class="loaded"><a href="<PATH>/imgd06.jpg"><img src="<PATH>/imgd06.jpg" title="imgd06"></a></li>
	<li class="loaded"><a href="<PATH>/imgd07.jpg"><img src="<PATH>/imgd07.jpg" title="imgd07"></a></li>
	<li class="loaded"><a href="<PATH>/imgd08.jpg"><img src="<PATH>/imgd08.jpg" title="imgd08"></a></li>
	<li class="loaded"><a href="<PATH>/imgd09.jpg"><img src="<PATH>/imgd09.jpg" title="imgd09"></a></li>
	<li class="loaded"><a href="<PATH>/imgd10.jpg"><img src="<PATH>/imgd10.jpg" title="imgd10"></a></li>
	<li class="loaded"><a href="<PATH>/imgd11.jpg"><img src="<PATH>/imgd11.jpg" title="imgd11"></a></li>
	<li class="loaded"><a href="<PATH>/imgd12.jpg"><img src="<PATH>/imgd12.jpg" title="imgd12"></a></li>
	<li class="loaded"><a href="<PATH>/imgd13.jpg"><img src="<PATH>/imgd13.jpg" title="imgd13"></a></li>
</ul>

photoboxについて

photoboxは、とりあえずイケてます。
見せ方、動き、滑らかさ、設置の容易さ、機能の豊富さ、どれをとっても抜群です。
レスポンシブにも対応してるし、今夜のモーダルはこいつで決まり!
対応ブラウザはIE8+になっていますが、現実的な動作としてはIE9+からといった感じ
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Avgrund

    Avgrund

    他とは違った現れ方をするモーダル、ポップアップ

  • MagnificPopup

    MagnificPopup

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

  • custombox

    custombox

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

  • Colorbox

    Colorbox

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

  • Boxer

    Boxer

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