jQuery/Vanilla Javascript

【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回は画像はもちろん、動画、webページ、インラインなにがきても対応できる万能プラグイン【Magnific Popup】をサンプル付きでご紹介します。

公式サイト:
https://dimsemenov.com/plugins/magnific-popup/

ソースは少し古いですが自分が一番最初に出会った万能モーダル系プラグインです。 画像、動画、HTMLファイルなどのポップアップ対応、複数設置可能でレスポンシブ、IE11も対応しています。
ただポップアップ時のアニメーション設定がちょっとわかりずらかったのでそこも含めご紹介します。

GitHub からmagnific-popup.cssjquery.magnific-popup.jsを取得して読み込みます。

<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<script src="js/jquery.magnific-popup.js"></script>

jsの設定は基本的に以下のような形になります。

<script type="text/javascript">
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline', //image,inline,iframe(YouTube・Googleマップ),ajax(HTMLポップアップ) 
			mainClass: 'mfp-fade', //アニメーションのクラスを設定する
			removalDelay: 600, //ポップアップを閉じる際のフェードアウト時間
			preloader: true, //リンク切れの際のエラー表示
			disableOn: 700, //700px以下でリンクにする
			fixedContentPos: false //trueはポップアップがposition:fixedに、falseはposition:absoluteに
		});
	});
</script>

複数の画像をギャラリー形式で表示することができます。
Titleの設定もできます。

HTML

<div class="wrap_content case_img popup-gallery">
	<a class="btn" href="img/magnific_img01.jpg" title="Title img01">img01</a>
	<a class="btn" href="img/magnific_img02.jpg" title="Title img02">img02</a>
	<a class="btn" href="img/magnific_img03.jpg" title="Title img03">img03</a>
</div><!-- wrap_content -->

JS

<script type="text/javascript">
$(document).ready(function() {
	$('.popup-gallery').magnificPopup({
		delegate: 'a',
		type: 'image',
		tLoading: 'Loading image #%curr%...',
		mainClass: 'mfp-fade',
		removalDelay: 600,
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
		},
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>by UHAHA</small>';
			}
		}
	});
});
</script>

デモimg

href=”#XXXX”で指定したidの要素をモーダルで表示させます。
type:は’inline‘に設定します。

HTML

<a class="btn popup-modal" href="#modal_test">inline</a>
<div id="modal_test" class="mfp-hide white-popup-block">
	<h1>Modal test</h1>
	<p>インラインテキストテスト</p>
	<p><a class="popup-modal-dismiss btn" href="#">CLOSE</a></p>
</div>

JS

<script type="text/javascript">
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline',
			mainClass: 'mfp-fade',
			removalDelay: 600
		});
		$(document).on('click', '.popup-modal-dismiss', function (e) {
			e.preventDefault();
			$.magnificPopup.close();
		});
	});
</script>

デモinline

type: ‘iframe‘で設定します。

Googleマップで設定するURLは Googleマップ の共有リンクだと表示されませんでしたのでURLは以下の書き方で設定します。
https://maps.google.co.jp/maps?q=loc:35.XXXX,139.XXXX&iwloc=A

HTML

<a class="btn popup-youtube" href="https://www.youtube.com/watch?v=w2iPKMP2a-U">YouTube</a>
<a class="btn popup-gmaps" href="https://maps.google.co.jp/maps?q=loc:35.649679,139.720945&iwloc=A">Googleマップ</a>

JS

<script type="text/javascript">
$(document).ready(function() {
	$('.popup-youtube, .popup-gmaps').magnificPopup({
		disableOn: 480,//700pxでポップアップせずYouTubeへリンクする
		type: 'iframe',
		mainClass: 'mfp-fade',
		removalDelay: 160,
		preloader: false,
		fixedContentPos: false
	});
});
</script>

デモiframe

同じサイト内のHTMLファイルをポップアップします。

HTML

<a class="btn simple-ajax-popup" href="ajax_sample.html">ajax</a>

JS

<script type="text/javascript">
$(document).ready(function() {
	$('.simple-ajax-popup').magnificPopup({
		type: 'ajax'
	});
});
</script>

デモajax

Magnific Popupはポップアップ時にフェードインなどのアニメーションをしたい場合、cssを別途設定し、removalDelayでポップアップを閉じるときにディレイをかけます。

JS(mainClassを設定)

<script type="text/javascript">
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline',
		 mainClass: 'mfp-fade',
   removalDelay: 600
		});
	});
</script>

CSS(フェードのクラスを作成)

.mfp-fade.mfp-bg{
	opacity: 0;
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing{
	opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content{
	opacity: 0;
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
	opacity: 0;
}

デモCSS

※デモではすべてにフェードアニメーションを設定しています。

他のプラグインでも複数設置やiframe対応可能なものも多いけど正直jsの対応がめんどくさいなという印象でした。
また、当初のサイト計画では単一のモーダルウィンドウの設置を予定していたのに複数設置にになった、外部サイトのポップアップもしたい、などと仕様が変更になった場合でも1つのプラグインで対応できます。
また、現時点のjsプラグインの選択は結局のところIE11で動いてレスポンシブ対応であることがまだ重要なのかなと思いました。

関連記事

【Modaal】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

【jQuery】簡単に実装できる時短モーダルウィンドウ「Remodal」

uhaha

当時は最強Magnific PopupとおもっていたけどやはりModaalですね~

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

  1. dizi より:

    Can I simply just say what a comfort to find someone that truly knows what they are discussing on the net. You certainly know how to bring an issue to light and make it important. A lot more people really need to check this out and understand this side of your story. I was surprised that you aren’t more popular given that you most certainly have the gift. Jada Clerc Moreen

dizi へ返信する コメントをキャンセル

*