Magnific Popupの使い方をサンプルコード付きで解説!

Magnific Popupの使い方をサンプルコード付きで解説します。Magnific Popupの使うことで簡単にレスポンシブに対応したポップアップウインドウ(モーダルウインドウ)を作成することができます。

コンテンツ [表示]

  1. 1Magnific Popupとは?
  2. 2Magnific Popupの導入方法
  3. 2.1jQueryの導入方法
  4. 2.2Magnific Popupの導入方法
  5. 3Magnific Popupの使い方
  6. 3.1アニメーションさせる方法
  7. 4まとめ

Magnific Popupとは?

Magnific Popup」はjQueryのプラグインであり、用いることで簡単にレスポンシブに対応したポップアップウィンドウ(モーダルウィンドウ)を作成することができます。

Photo byTemplune

Magnific Popupの導入方法

まず始めにMagnific Popupの導入方法について順番に紹介します。

jQueryの導入方法

jQuery Core – All Versions
jQuery Core – All Versions Powered by

こちらのサイトを見て一番最新のminifiedされたCDNをコードの方に貼り付けていただけるといいと思います。
現在の最新は下記となっています。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

本家よりもGoogleのCDNを使用したい場合

Hosted Libraries | Google Developers
GoogleによるjQueryのCDN

なんらかの理由で本家よりもGoogleのCDNを使用したい場合には上記のサイトを参照してください。

現在の最新は下記となっています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Magnific Popupの導入方法

Magnific-Popup/tree/master/dist
Magnific-Popup/tree/master/dist

まず上記のページでjquery.magnific-popup.min.jsmagnific-popup.cssをダウンロードもしくはコピーしてください。

そして次にCSSとJSをそれぞれ読み込むためのコードに貼り付けます。

CSS

CSSの読み込みコードはこちらになります。

<link rel="stylesheet" href="magnific-popup.css" />

JS

JSの読み込みコード(※jQueryの読み込みの後に記述してください)はこちらになります。


 

<script src="jquery.magnific-popup.min.js"></script>

Magnific Popupの使い方

それでは画像をポップアップウィンドウとして表示させる方法について紹介します。

まずサンプルコードを用いて挙動を見てみましょう。

このようにポップアップで画像が表示されていることが分かります。

では簡単にコードの解説を行います。ポップアップさせたい画像をaタグのhref属性に設定して、class属性で適当な名前を設定します。

そして次にjQueryの方で、classに対してmagnificPopupメソッドで中にオプションを記述します。

Magnific Popupを用いることで簡単にポップアップウィンドウが作成できることが分かります。
 

アニメーションさせる方法

Magnific Popupではポップアップが開かれた後「mfp-ready」クラスが追加され、ポップアップが閉じるときは「mfp-removing」が追加されてから、削除されます。

こちらを利用してcssアニメーションをつけることができます。

このようにフェードしてポップアップウィンドウが表示されていることが分かります。

では簡単にコードの解説を行います。

まずはCSSから簡単に解説します。

mfp-bgは画像部分、mfp-wrapは画像周りの黒い背景となります。それぞれ初期値はopacityを0とし、ポップアップが開かれた後mfp-ready、ポップアップが閉じるときのmfp-removingにそれぞれopacityを設定します。

あわせて読みたい
opacity
CSSのopacityプロパティは要素の透明度を指定するプロパティです。opacityプロパティの構文や使い方をサンプルコード付きで解説します。

そしてtransitionプロパティでアニメーションさせます。

この時、jQueryの方でremovalDelayの設定をしないと、ポップアップが閉じる時にすぐポップアップコンテンツが削除されてしまいアニメーションにならないため、removalDelayを適当な値に設定します。

これでアニメーションを作成できます。

まとめ

いかがでしたでしょうか?

ここで紹介した以外にMagnific Popupは様々なカスタマイズを行うことができます。

下記にそのカスタマイズの種類や適用させる方法が載っているサイトを載せておきます。
ぜひMagnific Popupを用いてポップアップウィンドウを作成してみてください。
 

壮大なポップアップドキュメント
ここでは、MagnificPopupの使用方法に関するガイドを見つけることができます。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次