Magnific Popupはレスポンシブにも対応したモーダル(ポップアップ)系プラグインです。今回簡単な使用手順をご紹介します。

クリエイター最終更新日: 20191219

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

  • このエントリーをはてなブックマークに追加

レスポンシブにも対応したモーダル(ポップアップ)系プラグイン「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[ネクスマグ]編集部アイコン画像
ライタープロフィール パソコン工房NEXMAG
[ネクスマグ] 編集部

パソコンでできるこんなことやあんなこと、便利な使い方など、様々なパソコン活用方法が「わかる!」「みつかる!」記事を書いています

記事を
シェア