Magnific PopupでjQueryのモーダルウィンドウを実装する方法

gallery

Magnific Popup は、レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグインです。
chromeなどのモダンブラウザはもちろん、IEでも使えます。
ライセンスはMIT。

デモページ

ファイルの準備

必要なファイルを読み込む

配布ページからデータをダウンロードして、CSSとJSファイルを読み込みます。
必要なのは dist ディレクトリの中に入っているファイルです。

Magnific Popup 配布元サイト

Magnific Popup github

<link rel="stylesheet" href="magnific-popup.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>

画像単体で表示させる方法

jQuery

モーダルウィンドウで表示させたい要素のclass名を、jQueryで設定します。ここでは .popup-image としています。

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

html

jQueryで指定したクラス名をaタグに付与します。

<a href="../images/modal/01.jpg" class="popup-image">
  <img src="../images/modal/thumb-01.jpg" />
</a>

ギャラリー表示は複数の画像を連続して表示させることが出来ます。

js

ギャラリー表示させる要素の親要素を指定します。ここでは .parent-container です。
次にdelegateでギャラリー表示させる子要素を指定します。ここではa要素です。
5行目以降はギャラリー表示にさせるための指定です。

$(function(){
$('.parent-container').magnificPopup({
  delegate: 'a', 
  type: 'image',
  gallery: { //ギャラリー表示にする
    enabled:true
  }
  });
});

html

jQueryで指定したクラス名を、ギャラリー表示させたい要素の親要素に指定します。

<div class="parent-container">
<a href="../images/modal/01.jpg">
  <img src="../images/modal/thumb-01.jpg" />
</a>
<a href="../images/modal/02.jpg">
  <img src="../images/modal/thumb-02.jpg" />
</a>
<a href="../images/modal/03.jpg">
  <img src="../images/modal/thumb-03.jpg" />
</a>
<a href="../images/modal/04.jpg">
  <img src="../images/modal/thumb-04.jpg" />
</a>
</div>

iframeで表示させる方法

iframeを使って指定したURLや動画などを表示させる方法です。

jQuery

jsでモーダル表示させたい要素のクラス名を設定します。ここでは .popup-iframe です。

$(function(){
  $('.popup-iframe').magnificPopup({
    type: 'iframe',
    disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
    mainClass: 'mfp-fade',
    removalDelay: 200,
    preloader: false,
    fixedContentPos: false
  });
});

html

<a class="popup-iframe" href="https://www.youtube.com/watch?v=C0xc28p4gnE">YouTube動画</a><br />
<a class="popup-iframe" href="/">Webページ</a>

インラインで画像とテキストを表示させる方法

inline

html上に記述してある内容をモーダル表示させる方法です。

js

jQueryでモーダルウィンドウへのリンクとなる要素のclass名を設定します。ここでは .popup-modal としています。
6行目以降は「閉じる」リンクの設定になります。入れなくても影響はありません。

$(function () {
  $('.popup-modal').magnificPopup({
    type: 'inline',
    preloader: false
  });
  //閉じるリンクの設定
  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    e.preventDefault();
    $.magnificPopup.close();
  });
});

html

a要素のhref属性に、モーダルウィンドウで表示させたい内容の親要素を指定します。ここでは #inline-wrap です。
class名mfp-hideは、最初に読み込んだCSSファイルで、エリアごと非表示にしておくためのスタイルが設定されているので付与しておきましょう。

<a class="popup-modal" href="#inline-wrap">インライン情報を表示</a>
<div id="inline-wrap" class="mfp-hide">
  <h1>画像とテキストを表示</h1>
  <div class="image"><img src="../images/modal/01.jpg"></div>
  <p>キャプションを付けたい時なんかに便利です。</p>
  <p class="popup-modal-dismiss"><a href="#">閉じる</a></p>
</div>

Retinaディスプレイ対応

PC用の画像をRetina対応デバイスで表示させると、サイズによってはもっさりしてしまう可能性があります。
この方法では、モーダルウィンドウ用の画像を通常用とRetinaディスプレイ用の2つ用意しておき、デバイスごとに画像を出し分けます。

js

Retinaディスプレイだったら、画像の拡張子の前に「@2x」とついているものを表示するよう設定します。
通常用のファイル名がimage.jpgだったら、image@2x.jpgです。

$(function () {
$('.retina-modal').magnificPopup({
  type: 'image',
  retina: {
    ratio: 2,
    replaceSrc: function(item, ratio) {
      return item.src.replace(/\.\w+$/, function(m) { return '@2x' + m; });
        }
        }
    });
});

html

htmlでは通常用の画像を設定します。

<a href="../images/modal/image.jpg" class="retina-modal">Open</a>

デモページ

おすすめ書籍

jQueryの基本～応用を学習するのにおすすめな書籍です。
こちらを一通りやれば、一般的なWebサイトのUIを実装する方法は身につくと思います。

jQuery標準デザイン講座
jQuery　仕事の現場でサッと使える! デザイン教科書