lightbox系の代表的なプラグイン「Magnific Popup」は画像はもちろんのこと、YoutubeやGoogle map・外部htmlをポップアップウィンドウで表示できます。
今回は「Magnific Popup」の使い方を説明していきます。

「Magnific Popup」のカスタマイズやオプションを知りたい人はこちら

準備

Magnific Popupの公式サイトはこちらです。

Magnific Popupは次の3つのファイルを読み込ませれば使用できます。

• jQueryライブラリ
• jquery.magnific-popup.min.js
• magnific-popup.css

「jquery.magnific-popup.min.js」「magnific-popup.css」はこちらのGitHubよりダウンロードしてください。

基本的な使い方

単体で表示させる

画像を単体でポップアップで表示させる場合は次のように記述します。

html

<a href="画像パス" class="popup-btn">OPEN</a>

script

$(function() {
  $('.popup-btn').magnificPopup({
    type:'image'
  });
});

もしくは次のように記述して、子要素に一括してポップアップの設定ができます。

html

<div class="popup-container">
  <a href="画像パス">OPEN</a>
  <a href="画像パス">OPEN</a>
  <a href="画像パス">OPEN</a>
</div>

script

$(function() {
  $('.popup-container').magnificPopup({
    delegate: 'a', //クリックしたらポップアップ表示する子要素のセレクタ
    type:'image'
  });
});

See the Pen magnificPopup-images by blanks (@blanks-site) on CodePen.

ギャラリーで表示させる

gallery: { enabled: true }を追加することで、ギャラリー表示できます。

html

<div class="popup-container">
  <a href="画像パス"><img src="サムネイル画像パス" alt=""></a>
  <a href="画像パス"><img src="サムネイル画像パス" alt=""></a>
  <a href="画像パス"><img src="サムネイル画像パス" alt=""></a>
</div>

script

$(function() {
  $('.popup-container').magnificPopup({
    delegate: 'a',
    type:'image',
    gallery: {
        enabled: true
    }
  });
});

See the Pen magnificPopup-imageGallery by blanks (@blanks-site) on CodePen.

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

上記まではaタグでポップアップ表示させる内容を設定していましたが、ここではitemsオプションでポップアップの内容を設定する例を紹介します。

html

<button type="button" id="popup-btn">OPEN</button>
<div id="my-popup">
 inline popup
</div>

script

$(function() {
  $('#popup-btn').magnificPopup({
    items: [
      {
        src: 'img.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // 個別でポップアップのタイプを設定する
      },
      {
        src: $('<div>Dynamically created element</div>'), // 動的に生成されるDOM要素
        type: 'inline' // 個別でポップアップのタイプを設定する
      },
      {
        src: '<div>HTML string</div>',
        type: 'inline' // 個別でポップアップのタイプを設定する 
      },
      {
        src: '#my-popup', // html内にある要素
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' //defaultのポップアップのタイプ
  });
});

公式でcodepenを用意してあるので、こちらから確認してみてください。

ポップアップのコンテンツについて

コンテンツタイプの種類

Magnific Popupではコンテンツタイプが「image」「iframe」「inline」「ajax」の4種類があります。

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

コンテンツタイプの指定の仕方は下記の2通りがあります。

• typeオプションで指定する

      <script>
      $(function(){
       $('.image-link').magnificPopup({
        type:'image'
        });
      });
     </script>
     
     <a href="画像パス" class="image-link">OPEN</a>
    
    

• mfp-〇〇のクラスで指定する

      <script>
      $(function(){
       $('.image-link').magnificPopup();
      });  	
     </script>
     
     <a class="mfp-image image-link">Open image</a>
    
    

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

href属性で指定する

 <a href="コンテンツのパス">Open image</a>

data-mfp-src属性で指定する

hrefとdata-mfp-srcをどちらも指定すると、data-mfp-srcが優先されます。

 <a href="コンテンツのパス" data-mfp-src="コンテンツのパス">&gt;Open image</a>

itemsオプションで指定する

指定の仕方はitemオプションを使って表示させるをご確認ください

callback「elementParse」で指定する

コンテンツソースを動的に変更する際に使用します。

$('.image-link').magnificPopup({
  type:'image',
  callbacks: {
    elementParse: function(item) {
      item.src = "画像パス"; // 画像やhtml要素・iframeなどをソースを指定します。
    }
  }
});

コンテンツタイプ「image」

imageタイプを選択した場合は、画像へのパスを主ソースとして設定する必要があります。
また以下のようなimageオプションを指定することで、ポップアップのマークアップなどを変更できます。

$('.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>', // ポップアップのマークアップ。.mfp-imgはimgタグに、.mfp-closeはクローズボタンに置換される。
  
    cursor: 'mfp-zoom-out-cur', // ポップアップを表示したときのbodyタグに追加されるクラスを指定
  
    titleSrc: 'title', // 画像のタイトルを取得する属性を指定
    // 次のものはタイトルを関数で返す例です。
    // titleSrc: function(item) {
    //   return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
    // }
  
    verticalFit: true, // 垂直方向に画像を収める
  
    tError: '<a href="%url%">The image</a> could not be loaded.' // ローディングが失敗したときのエラーメッセージ
  }
});

コンテンツタイプ「iframe」

iframeタイプを選択したときは「YouTube」「Vimeo」「Google Maps」のURLを指定することで、それぞれをポップアップで表示できます。

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

See the Pen magnificPopup-iframe by blanks (@blanks-site) on CodePen.

またiframeオプションを指定して、ポップアップのマークアップなどを変更できます。

$('.image-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>',  // ポップアップのマークアップ。.mfp-closeはクローズボタンに置換される。
  }
});

コンテンツタイプ「inline」

html内の要素をポップアップで表示させます。ポップアップさせたい要素を隠したい場合には、ポップアップさせたい要素に「mfp-hide」のクラスを付けておきます。

初期の状態ではポップアップ要素は縦中央へのセンタリング以外は何もスタイルが効いていないので、他のスタイルは自分で書いて適用させます。

またクラス名「mfp-close」を付けたものがクローズボタンに置換されます。

See the Pen magnificPopup-inline by blanks (@blanks-site) on CodePen.

コンテンツタイプ「ajax」

外部htmlをポップアップで表示させます。
スタイルはinlineの時と同じで、縦中央へのセンタリング以外は何もスタイルが効いていない状態ですので、他のスタイルは自分で書く必要があります。

また下記のようなajaxオプションでローディング時の設定ができます。

$('.ajax-link').magnificPopup({
  type:'ajax',
  ajax: {
    settings: null, // jQueryのajaxオプションで設定できます http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
    cursor: 'mfp-ajax-cur', // ポップアップで表示されたときにbodyに追加されるクラス
    tError: '<a href="%url%">The content</a> could not be loaded.' // ローディングが失敗したときのエラーメッセージ
  }
});

他にもローディング後にコンテンツを変更したり、特定の要素だけを表示したりするときに使えるコールバックも用意してあります。

例えば以下のparseAjaxがあります。これは特定の要素だけを表示したい時に使用できます。

$('.ajax-link').magnificPopup({
  type:'ajax',
  callbacks: {
    parseAjax: function(mfpResponse) {
      mfpResponse.data = $(mfpResponse.data).find("#some-element");
    }
  }
});

mfpResponse.dateでロードしたコンテンツが取得でき、上記のように「mfpResponse.date」を更新すると特定の要素だけ（ここでは#some-element）を表示できます。

しかし1つ気をつけておきたいことがあります。例えばロードするhtmlの中身が以下の場合だとうまく取得できません

<div id="some-element">some-elementテキストテキストテキスト</div>
<div id="other-element1">other-element1テキストテキストテキスト</div>
<div id="other-element2">other-element2テキストテキストテキスト</div>

ロードコンテンツを全体を囲むタグがないとうまく取得できないので、以下のようにしましょう。
（idのwrapperはなくても大丈夫です。）

<div id="wrapper">
 <div id="some-element">some-elementテキストテキストテキスト</div>
 <div id="other-element1">other-element1テキストテキストテキスト</div>
 <div id="other-element2">other-element2テキストテキストテキスト</div>
</div>

またロードしたコンテンツをロード後コンテンツの修正ができるajaxContentAddedがあります。

ajaxContentAddedはparseAjaxと少し似ていますが、parseAjaxはロードしたコンテンツ全体を別のものに置き換えることが容易にできましたが、ajaxContentAddedはコンテンツ全体を置き換えることは結構面倒です。（かなり労力を要します。。素直にparseAjaxを使いましょう）

どちらかというと、クラスを足したり、要素を足したりするような時に使用します。
下記の例では、クラスと要素を足しています。

$('.ajax-link').magnificPopup({
  type:'ajax',
   callbacks: {
    ajaxContentAdded: function() {
      this.content.find("#some-element").addClass("class");
      this.content.append("<div>Add Contents</div>");
    }
   }
});

今回はMagnific Popupについてはこれぐらいまでにしておきます。結構長くなりそうなので、他のオプションについては別記事で書きたいと思います。

「Magnific Popup」のオプション一覧の記事を書きました。
今回は書けなかったオプションの説明を書きましたので、こちらもぜひ参考にしてみてください。

「Magnific Popup」の矢印、閉じるボタン、カウンターのカスタマイズの記事を書きました。
よくデザインを変更する要素のカスタマイズ方法なので、こちらも参考にしてみてください。