jQuery「Magnific Popup」の使い方

ブログ

2021.01.29 コーディング

jQuery「Magnific Popup」の使い方

こんにちは!コーダーのSです。

本日はjQueryプラグインMagnific Popupについてご紹介したいと思います。

Magnific Popupとは

jQueryプラグインMagnific Popupは、外部JavaScriptファイルとCSSファイルを読み込むことで、 簡単にモーダル画面の表示ができてしまうといった優れものです。

実際に私も何度か利用経験があるので、その時の使用方法と、手順について説明します。

Magnific Popup実装の手順

まず、読み込む外部ファイルが無いと始まりませんね。 下記URLから外部ファイルを取得してください。

https://github.com/dimsemenov/Magnific-Popup

そして自身の作成しているサイトの適当なディレクトリにJavaScriptファイルとCSSファイルを配置します。

配置するだけでは使用できないので、同サイト内のどこでも良いので、JavaScriptファイルとCSSファイルを読み込む命令を記述してください。

 

その後、JavaScriptで下記の命令を記述します。

$(‘適用するクラス名’).magnificPopup({ type: ‘image’ // その他のオプション(必要であれば) })

簡単に説明すると、適用するクラス名にMagnific Popupのimageオプションを実行するよ。といったところだと思います。

 

ここまで来たら後はhtml側で呼び出したい画像のURLを指定すれば良いだけです。

指定はaタグで行います。

先程指定した「適用するクラス名」をaタグに付与し、 href属性でモーダル表示したい画像のURLを指定します。

これでjQueryプラグインMagnific Popupの画像をモーダル表示させる方法は完了です。

 

先程は、画像をモーダル表示させる方法についてご説明させていただきましたが、テキストなどをモーダル表示させたいということも出てくるかと思います。

そんな時は先程のtype: “image”をinlineに変更します。

$(‘適用するクラス名’).magnificPopup({ type: ‘inline’ // その他のオプション(必要であれば) })

このような感じです。

 

画像の場合、この後HTML側でaタグを用いれば終了でしたがinlineの場合、仕様が少々異なります。

まず、HTML側で<a class=”適用するクラス名” href=”#inline-modal-wrap”>テキスト</a>といった形で、ポップアップのトリガーになるクラスにhref属性でID名を指定します。

そうすることで、 id=”inline-modal-wrap”が付与されているHTMLがモーダル表示されるようになります。

その他詳しいオプションにつきましては、https://takblog.site/web/?p=131 こちらのサイトを参考にしていただきたいと思います。

最後に

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

 

今回はモーダル表示を簡単にするjQueryプラグインMagnific Popupについてご紹介させていただきました。

モーダル画面の詳細は、CSSで装飾できるので、是非自分好みのモーダル画面に仕上げてみてください。

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら