1つの画像でモーダル表示

img01 img02 img03

複数画像をグループでモーダル表示

img04 img05 img06 img07 img08 img09

iframeで動画の再生もできる

inline表示も

インラインコンテンツも表示できるのだ!

閉じる

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

  • files
  • js
  • html
<link href="<PATH>/magnific-popup.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.magnific-popup.min.js"></script>
<script>
	$(window).load(function(){
		$('.MagnificPopup-demo01').magnificPopup({type:'image'});
		$('#MagnificPopupDemo02').magnificPopup({
			delegate: 'a',
			type:'image',
			gallery: {
				enabled: true,
				navigateByImgClick: true,
				preload: [0,1]
			}
		});
		$('.MagnificPopup-demo02').magnificPopup({
			disableOn: 700,
			type: 'iframe',
			removalDelay: 160,
			preloader: false,				
			fixedContentPos: false
		});
		$('.MagnificPopup-demo03').magnificPopup({
			type: 'inline',
			preloader: false,
			focus: '#username',
			modal: true
		});
		$(document).on('click', '.popup-modal-dismiss', function (e) {
			e.preventDefault();
			$.magnificPopup.close();
		});
	});
</script>
<div class="MagnificPopup-box">
	<p class="title">1つの画像でモーダル表示</p>
	<a class="MagnificPopup-demo01" href="<PATH>/img01.jpg"><img src="<PATH>/img01.jpg" width="100" alt="img01"></a>
	<a class="MagnificPopup-demo01" href="<PATH>/img10.jpg"><img src="<PATH>/img10.jpg" width="100" alt="img02"></a>
	<a class="MagnificPopup-demo01" href="<PATH>/img15.jpg"><img src="<PATH>/img15.jpg" width="100" alt="img03"></a>
</div>

<div id="MagnificPopupDemo02" class="MagnificPopup-box">
	<p class="title">複数画像をグループでモーダル表示</p>
	<a href="<PATH>/imgb05.jpg"><img src="<PATH>/imgb05.jpg" width="100" alt="img04"></a>
	<a href="<PATH>/imgb06.jpg"><img src="<PATH>/imgb06.jpg" width="100" alt="img05"></a>
	<a href="<PATH>/imgb07.jpg"><img src="<PATH>/imgb07.jpg" width="100" alt="img06"></a>
	<a href="<PATH>/imgb08.jpg"><img src="<PATH>/imgb08.jpg" width="100" alt="img07"></a>
	<a href="<PATH>/imgb09.jpg"><img src="<PATH>/imgb09.jpg" width="100" alt="img08"></a>
	<a href="<PATH>/imgb11.jpg"><img src="<PATH>/imgb11.jpg" width="100" alt="img09"></a>
</div>

<div class="MagnificPopup-box">
	<p class="title">iframeで動画の再生もできる</p>
	<button class="green MagnificPopup-demo02" href="http://www.youtube.com/watch?v=kGFTQfXOp1Q">動画を再生</button>
</div>

<div class="MagnificPopup-box">
	<p class="title">inline表示も</p>
	<button class="red MagnificPopup-demo03" href="#MagnificPopupModal">インラインコンテンツの表示</button>
	<div id="MagnificPopupModal" class="mfp-hide white-popup-block">
		<p class="title"></p>
		<p>インラインコンテンツも表示できるのだ!</p>
		<p class="close"><a class="popup-modal-dismiss" href="#">閉じる</a></p>
	</div>
</div>

MagnificPopupについて

MagnificPopupは、画像、フォーム、動画などをモーダルで表示できるプラグイン。
シンプル目な見た目とは裏腹になかなか豊富な機能を備えています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • popeye

    popeye

    一味違うモーダル・ポップアップ

  • Boxer

    Boxer

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

  • Colorbox

    Colorbox

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

  • photobox

    photobox

    とりあえずイケてます

  • Avgrund

    Avgrund

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