デモで覚える!Magnific Popupの使い方【基本編】

CODE
のり
のり

サムネイル画像をクリックしたら、背景が黒色半透明になって拡大画像が表示されるようにしたいけど、どうやって実装すればいいんだろう?

そんな疑問に答えます。

今回は、ライトボックスのオープンソースライブラリであるMagnific Popupの使い方をまとめたいと思います。

Magnific Popupとは

Magnific Popupとは、サムネイル画像をクリックしたら、背景が黒色半透明になって拡大画像が表示される、いわゆるライトボックスが簡単に実装できるライブラリです。MITライセンスで配布されています。

CODEPENのデモです。写真をクリックするとライトボックスを体験できます。

See the Pen magnific-popup-sample by Nori (@ysnoritnk) on CodePen.

Magnific Popupの基本的な使い方

適用方法

それでは、実際に使っていきましょう。まずは、Magnific PopupのGitHubページにいき、distフォルダをクリックします。

■Magnific Popup – GitHub
https://github.com/dimsemenov/Magnific-Popup/tree/master/

distフォルダから以下の2つのファイルをダウンロードします。

  • jquery.magnific-popup.min.js
  • magnific-popup.css

ダウンロードしたら、適当にサイトのcss/jsフォルダなどに格納してください。

htmlのhead要素にCSSファイル、body要素にjsファイルの参照先をそれぞれ記載します。jsファイルは、jQueryファイルの後に記載してください。

index.html
<head>
 <link rel="stylesheet" href="magnific-popup.css">
</head>
<body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script src="jquery.magnific-popup.min.js"></script>
</body>

Mgnific Popup – Including files

単体での表示方法

サムネイルの画像<img>要素をライトボックス画像<a>要素で以下のように囲います。Magnific Popup用のクラスも付けておきましょう。

index.html
<a href="ライトボックスで表示する画像のパス" class="pupup-link" title="ライトボックスで表示するタイトル">
  <img src="サムネイル画像のパス" alt="">
</a>

続いてJSファイルです。セレクタに<a>タグで指定したクラスを入れて以下のように記載すればOKです。

main.js
$('.popup-link').magnificPopup({
  type: 'image'
});

See the Pen magnific-popup-sample by Nori (@ysnoritnk) on CodePen.

ちなみに、デモで使用している写真はFlickrのPublic Domainの写真を使っています。APIを使ってPublic Domainの写真一覧のリンクを簡単に取得したい場合は、こちらの記事に記載してますので参考にしてください。

親要素のクラスを利用する場合

最初のものと同じですが、例えば<a>要素の親要素である<div>にclassが付与されている場合は、delegate: 'a' を設定することで、子要素の<a>のライトボックスを有効にできます。

<div class="popup">
  <a><img></a>
  <a><img></a>
  <a><img></a>
</div>

See the Pen EqWMzW by Nori (@ysnoritnk) on CodePen.

続いて、複数枚ある画像でギャラリーを作ってみましょう。

ギャラリーで表示する

ギャラリーは、ナビゲーション矢印が追加され、ポップアップされた画像を切り替えることができます。こちらもデモを見てみましょう。

See the Pen magnific-popup-gallery by Nori (@ysnoritnk) on CodePen.

複数の画像をギャラリーとして表示するには、gallery:{enabled:true}を記載します。

itemsオプションを使って表示する

これまで<a>要素や<img>要素を記載してライトボックスを表示させる方法を紹介しましたが、itemsオプションを使って表示させる方法を紹介します。これは、ボタンを押すとライトボックスが表示されるような場合に使用します。

まず、単体で表示させる例として、以下のようにitem:{ }を使って記載します。

main.js
// 単体で表示させる例
$('#some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // デフォルトのコンテンツタイプ
});

See the Pen magnific-popup-item by Nori (@ysnoritnk) on CodePen.

itemオプションは複数指定することも可能です。コンテンツのタイプは次の項で説明しますが、動画や動的な要素などもギャラリーの中に含めることができます。

main.js
// 複数オブジェクトを表示する例
$('#some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg',
      title: 'title'
      },
      {
        src: 'https://vimeo.com/123123',
        type: 'iframe' // デフォルトのコンテンツタイプ(image)をオーバーライドします
      },
      {
        src: $('<div class="white-popup">動的に生成された要素</div>'), // 動的に生成された要素
        type: 'inline' // デフォルトのコンテンツタイプ(image)をオーバーライドします
      },
      {
        src: '<div class="white-popup">HTML 文字列</div>',
        type: 'inline' // デフォルトのコンテンツタイプ(image)をオーバーライドします
      },
      {
        src: '#my-popup', // ポップアップとして使用されるページ上の要素のCSSセレクター
        type: 'inline' // デフォルトのコンテンツタイプ(image)をオーバーライドします
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // デフォルトのコンテンツタイプ
});

See the Pen magnific-popup-item02 by Nori (@ysnoritnk) on CodePen.

Magnific Popup – Initializing popup

コンテンツタイプについて

Magnific Popupにはコンテンツタイプが4種類あります。各コンテンツは、URLに基​​づくタイプの「自動検出」はないため、手動で定義する必要があります。

  • image
  • iframe
  • inline
  • ajax

コンテンツタイプの定義方法

コンテンツタイプは、次の2つの方法で定義できます。

typeオプションを使用する方法

単体での表示方法に記載したものと一緒です。
$('セレクタ').magnificPopup({type: 'image'});で定義します。

main.js
$('.popup-link').magnificPopup({
  type: 'image'
});

See the Pen magnific-popup-sample by Nori (@ysnoritnk) on CodePen.

mfp-TYPE CSSを使用する方法

もう一つが、mfp-○○というMagnific PopupのCSSクラスを使う方法です。○○には、コンテンツタイプが入ります。

  • mfp-image
  • mfp-iframe
  • mfp-inline
  • mfp-ajax

例を見てみましょう。

index.html
<a href="path-to-image-1.jpg" class="mfp-image image-link">Open image</a>

main.js
$('.image-link').magnificPopup()

See the Pen magnific-popup-mfp-TYPE by Nori (@ysnoritnk) on CodePen.

コンテンツソースの指定方法

画像へのパス、HTMLファイルへのパス、ビデオページへのパスなどの指定方法は以下の2つの方法があります。

href属性を使う方法

index.html
<a href="image-for-popup.jpg">Open image</a>

data-mfp-srcを使う方法

href属性で指定したものをオーバーライドするので、data-mfp-srcのソースを優先します。

index.html
<a href="some-image.jpg" data-mfp-src="image-for-popup.jpg">Open image</a>

itemオプションで指定する方法

main.js
$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

また、elementParseコールバックを使って動的にコンテンツを変更出来ます。

main.js
$('.image-link').magnificPopup({
  type:'image',
  callbacks: {
    elementParse: function(item) {
      item.src = 'change-image.jpg';
      item.el.context.title = 'title-modify';
      // コンソールでitem.elで変更できる要素が見れます。
     console.log(item);
    }
  }
});

以下、CODEPEN上では動きませんでしたがこの記載で写真の入れ替えに成功しています。

See the Pen magnific-popup-elementParse by Nori (@ysnoritnk) on CodePen.

Magnific Popup – Content Types

コンテンツタイプ

Image Type

画像のライトボックスです。基本的な記載方法はこれまでに記載したとおり以下のようになります。

main.js
$('.image-link').magnificPopup({
  type: 'image'
});

imageオプションを使うとHTMLのマークアップなどでカスタマイズすることが出来ます。markup:部分に記載の各<div class="mfp-○○">がタグやボタンに置き換わります。

この記載方法を選択した場合は、html側に画像へのパスを設定する必要があります。

index.html
<a href="some-image.jpeg" class="image-link" title="title">
  <img src="image.jpeg" alt="">
</a>
main.js
$(function(){
  $('.image-link').magnificPopup({
    type: "image",
    image: {
      markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="mfp-img"></div>'+
                '<div class="mfp-bottom-bar">'+
                  '<div class="mfp-title"></div>'+
                  '<div class="mfp-counter"></div>'+
                '</div>'+
              '</div>', // ポップアップのHTMLマークアップ. `.mfp-img`はimgタグ、`.mfp-close`は閉じるボタンに置き換わる
      
      // bodyタグに追加するクラスを指定する場合に記載。
      cursor: 'mfp-zoom-out-cur', // ズームカーソルを指定する例。ズームアウトカーソルを無効にするには、nullに設定します。
    
      titleSrc: 'title', // スライドのキャプションを含むターゲット要素の属性。 
      // またはタイトルを返す関数を指定します。
      // titleSrc: function(item) {
      //   return item.el.attr('title') + '<small>by photographer </small>';
      // }
    
      verticalFit: true, // 垂直方向に画像をフィットさせる
    
      tError: '<a href="%url%">The image</a> could not be loaded.' // 読み込みに失敗した時のエラーメッセージ
    }
  });
});

See the Pen magnific-popup-Image Type by Nori (@ysnoritnk) on CodePen.

Magnific Popup – Image Type

Iframe Type

Iframeタイプは、YoutubeやVimeo、Google MapのURLを指定することでそれぞれのライトボックスを表示することができます。

基本的な定義方法は以下です。

main.js
$('.iframe-link').magnificPopup({
  type: 'iframe'
});

See the Pen magnific-popup-Iframe Type by Nori (@ysnoritnk) on CodePen.

iframeオプションを使うと、youtube、vimeo、google map以外のものも参照出来るようです。マークアップなどは、image typeと同じです。

main.js
$(function(){
  $('.iframe-link').magnificPopup({
    type: "iframe",
    iframe: {
      markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
              '</div>', // ポップアップのHTMLマークアップ.`.mfp-close`は閉じるボタンに置き換わる
    
      patterns: {
        youtube: {
          index: 'youtube.com/', // ビデオのタイプを検出する文字列
    
          id: 'v=', // URLを2つの部分に分割する文字列。2番目の部分は%id%でないといけない
          // またはnull-完全なURLが返されます
          // または、%id%を返す関数を指定します
          // id: function(url) { return 'parsed id'; }
    
          src: '//www.youtube.com/embed/%id%?autoplay=1' // iframeのソースとして設定されるURL.
        },
        vimeo: {
          index: 'vimeo.com/',
          id: '/',
          src: '//player.vimeo.com/video/%id%?autoplay=1'
        },
        gmaps: {
          index: '//maps.google.',
          src: '%id%&output=embed'
        }
    
        // ここにさらにソースを追加できます
    
      },
    
      srcAction: 'iframe_src', // テンプレートキー。iframeの部分はCSSセレクター、srcは属性を定義します。「iframe_src」は、「iframe」を見つけて属性「src」を設定することを意味します。
    }
  });
});

Magnific Popup – Iframe Type

Inline Type

インライン要素からポップアップを作成・表示することが出来ます。Inline Typeを作成する場合には以下の手順で作業が必要です。

1)ポップアップに表示するHTML要素を作成し、bodyに記載します。例では、簡単な文字列を表示するページを作成しています。このHTML要素をポップアップ前に非表示にするには、クラスmfp-hideを記載する必要があります。

index.html
<div id="test-popup" class="inline-popup mfp-hide">
  Popup content
</div>

2)この要素に対してCSSでスタイルします。 Magnific Popupはデフォルトで、垂直方向のセンタリング(alignTop:falseの場合)を除き、スタイルを適用しません。閉じるボタンは内部で自動的に追加されます(closeBtnInside:trueの場合)。

main.css
.inline-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

3)ポップアップを開くボタンまたはリンクを追加します(ソースは要素のCSS IDと一致する必要があります(この例では#test-popup)。

index.html
<!-- リンク -->
<a href="#test-popup" class="open-popup-link">ポップアップを表示</a>

<!-- ボタン -->
<a href="#test-popup" class="open-popup-link"><button type="button">ポップアップを表示</button></a>

<!-- こんな記載もできます -->
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">ポップアップを表示</a>

4)スクリプトを初期化します。

main.js
$(function(){
  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true // マウスの中央クリックでポップアップを開くことができます。 hrefで代替ソースを提供しない場合は、常にtrueに設定します。
  });
});

See the Pen magnific-popup-Inline Type by Nori (@ysnoritnk) on CodePen.

スクリプトの初期化は以下の方法でも出来ます。

// From HTML string
$('button').magnificPopup({
  items: {
      src: '<div class="inline-popup">Dynamically created popup</div>',
      type: 'inline'
  }
});

// From an element with ID #popup
$('button').magnificPopup({
  items: {
      src: '#popup',
      type: 'inline'
  }
});

// From jQuery object
$('button').magnificPopup({
  items: {
      src: $('<div class="white-popup">Dynamically created popup</div>'),
      type: 'inline'
  }
});

// Open directly via API
$.magnificPopup.open({
  items: {
    src: '<div class="inline-popup">Dynamically created popup</div>', // can be a HTML string, jQuery object, or CSS selector
    type: 'inline'
  }
});

Magnific Popup – Inline Type

Ajax Type

Ajaxタイプのポップアップを作成するには、まず表示するファイルへのパスを定義し、ポップアップのajaxタイプを選択します。

index.html
<a href="another.html" class="ajax-popup-link">ポップアップを表示</a>
main.js
$(function(){
  $('.ajax-popup-link').magnificPopup({
    type: 'ajax'
  });
});

スタイルについては、Inlineと一緒で垂直方向のセンタリング(alignTop:falseの場合)を除き、スタイルを適用しません。閉じるボタンは内部で自動的に追加されます(closeBtnInside:trueの場合)。

注意点として、ポップアップで表示されている内容からのリンク遷移は出来ません。また、ロードされるファイルへのパスは同じドメイン上である必要があります。

例として、同じドメイン上なのでギャラリー表示のCODEPENをAjaxで表示しています。また、画像をクリックしてもギャラリーの表示は出来ないようになっています。あと、見にくいですが右上に閉じるボタンがあります。

See the Pen magnific-popup-Ajax Type by Nori (@ysnoritnk) on CodePen.

Ajaxのオプションとして、以下のようなセッティングできます。

main.js
$(function(){
  $('.ajax-popup-link').magnificPopup({
    type: 'ajax',
    ajax: {
      settings: null, // jQueryのAjax設定ができます-http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
      // 例:
      // settings: {cache:false, async:false}
    
      cursor: 'mfp-ajax-cur', // ロード中にbodyに追加されるCSSクラス(「Progress」カーソルを追加)
      tError: '<a href="%url%">The content</a> could not be loaded.' // エラーメッセージ。ギャラリーが有効な場合、%curr%および%total%タグを含めることができます
    }
  });
});

また、ロード後にコンテンツを変更したり、ロードしたファイルから特定の要素のみを選択して表示することもできます。その際には、parseAjaxコールバックを使います。

main.js
$(function(){
  $('.ajax-popup-link').magnificPopup({
    type: 'ajax',
    ajax: {
      settings: null, // jQueryのAjax設定ができます-http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
      // 例:
      // settings: {cache:false, async:false}
    
      cursor: 'mfp-ajax-cur', // ロード中にbodyに追加されるCSSクラス(「Progress」カーソルを追加)
      tError: '<a href="%url%">The content</a> could not be loaded.' // エラーメッセージ。ギャラリーが有効な場合、%curr%および%total%タグを含めることができます
    },
    callbacks: {
      parseAjax: function(mfpResponse) {
        // mfpResponse.dataは、単純なHTMLファイルのajax "success"コールバックからの 
        // "data"オブジェクトであり、単なる文字列になります。consolelogをChrome DevToolで確認してみてください。
        // これを変更して、ポップアップの内容を変更できます。
        // たとえば、#some-elementのみを表示するには:
        mfpResponse.data = $(mfpResponse.data).find('#some-element');
    
        // mfpResponse.dataは文字列またはDOM(jQuery)要素である必要があります
    
        console.log('Ajax content loaded:', mfpResponse);
      },
      ajaxContentAdded: function() {
        // Ajaxコンテンツが読み込まれ、DOMに追加されます
        // 例:
        this.content.append("<div>追加したコンテンツ</div>");

        console.log('this.content loaded:',this.content);
      }
    }
  });
});

以下の例では、前に記載したiframeのCODEPENをAjaxで表示していますが、parseAjaxでYoutubeの要素だけを表示しています。また、ajaxContentAddedで<div>を追加しています。

See the Pen magnific-popup-Ajax Type-callbacks by Nori (@ysnoritnk) on CodePen.

Magnific Popup – Ajax Type

まとめ

いかがでしたか?

Magnific Popupの基本的な使い方が理解できたかと思います。まだまだオプションなどがありますので、続きは次回にしたいと思います!

コメント

タイトルとURLをコピーしました