こんにちは！コーダーの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で装飾できるので、是非自分好みのモーダル画面に仕上げてみてください。
