jQueryプラグイン Magnific Popup の使い方

1.magnific popupのダウンロード

まずは公式Githubからファイル一式をダウンロードします。

“dimsemenov/Magnific-Popup”．GitHub, Inc．2019．
https://github.com/dimsemenov/Magnific-Popup

使用するファイルは「dist」フォルダ内の「magnific-popup.css」「jquery.magnific-popup.min.js」です

2.jQueryの読み込み

公式CDNからjQueryを読み込みます。

“jQuery CDN”．The jQuery Foundation．2019．
https://code.jquery.com/

jQueryの読込

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

3. プラグインの読み込み

プラグインの必要ファイルを読み込みます。

CSSの読み込み

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

Sの読み込み（jQuery読み込みの後に記述します）

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

4.magnific popupを使用する

使用する箇所にclass名を割り振ります。ここでは class=”popup”とします。

HTML

<a href="image.png" class="popup">ポップアップを開く</a>

jQueryを記述します。

jQuery

<script>
$(document).ready(function() {
    $('.popup').magnificPopup({
        type: 'image'
    });
}
</script>

以上が画像をポップアップさせる作業の流れになります。

公式サイトではその他のサンプルやオプションなども解説されています。

“Magnific Popup： Responsive jQuery Lightbox Plugin”．Created by Dmitry Semenov． Collaborator Danny Hearnah．2019．
https://dimsemenov.com/plugins/magnific-popup/

シンプルですがカスタマイズもしやすいプラグインなので、是非使ってみてください。

ライタープロフィール パソコン工房NEXMAG
[ネクスマグ] 編集部