「Magnific Popup」のオプション一覧

前回のよく使うjQueryプラグイン②「Magnific Popup」で、Magnific Popupの基本的な使い方・ポップアップで表示できるコンテンツについて説明いたしました。
今回はMagnific Popupのオプションを説明していきたいと思います。
ただMagnific Popupはオプションが豊富なので、一般的なオプションやgalleryオプションなどに分けて説明していきたいと思います。

「Magnific Popup」の矢印、閉じるボタン、カウンターのカスタマイズという記事も書きました。こちらも参考にしてみてください。

一般的なオプション
galleryオプション
animationオプション
retinaオプション
zoomオプション

一般的なオプション

type

初期値:null（設定必須）
ポップアップするコンテンツの種類を設定します。
詳しくはよく使うjQueryプラグイン②「Magnific Popup」を参照ください。

delegate

初期値:null
クリックするとポップアップ表示する子要素のセレクタを指定。
詳しくはよく使うjQueryプラグイン②「Magnific Popup」単体で表示させるを参照ください。

disableOn

初期値:null
disableOnを設定すると、windowサイズによってMagnific Popupを無効にすることができます。
例えば下記のように設定すると640px以下ではMagnific Popupは動かなくなります。

$('.some-link').magnificPopup({
  disableOn: 640
});

また下記のようにfunctionを書くこともできるので、windowサイズ以外でもMagnific Popupの有効/無効を切り替えることができます。
「return false」で無効に、「return true」で有効にできます。

$('.some-link').magnificPopup({
 disableOn: function() {
   if( $(window).scrollTop() < 600 ) {
     return false;
   }
   return true;
 }
});

midClick

初期値:false
trueにすると、マウスのミドルボタンのクリック・Command/Ctrlキーを押してクリックでもポップアップが開くようになります。

 $('.some-link').magnificPopup({
  midClick: true
 });

mainClass

初期値:null
mainClassで設定した値がポップアップ全体を囲むdivタグにクラス名として追加されます。

 $('.some-link').magnificPopup({
  mainClass: "myClass"
 });

preloader

初期値:true
preloaderオプションをtrueの場合、ポップアップのコンテンツがない場合は「The image could not be loaded.」と表示されますが、falseの場合はエラーイメージが表示されます。
またtrueの場合はポップアップのコンテンツを囲むタグにそれぞれ以下のようなクラスがつきます。

/* コンテンツがローディング中の間にコンテンツにつくクラス */
.mfp-s-loading { }

/* コンテンツがローディングが成功した場合にコンテンツにつくクラス */
.mfp-s-ready { }

/* コンテンツがローディングが失敗した場合にコンテンツにつくクラス */
.mfp-s-error { }

focus

初期値:null
フォーカスされるべきポップアップ内の要素のCSSセレクタを設定します。例としてはinput要素などフォーカスするべき要素があるときは設定します。

closeOnContentClick

初期値:false
trueの場合、コンテンツをクリックするとポップアップが閉じるようになります。

closeOnBgClick

初期値:true
trueの場合、背景のオーバーレイをクリックするとポップアップが閉じるようになります。

closeBtnInside

初期値:true
falseの場合、クローズボタンがポップアップコンテナ外に出て、（初期値のままだと）ウィンドウの右上にクローズボタンが表示されます。
trueの場合、ポップアップコンテンツの右上にクローズボタンが表示されます。

showCloseBtn

初期値:true
falseの場合、クローズボタンが表示されません。

enableEscapeKey

初期値:true
trueの場合、escキーでポップアップを閉じることができます。

modal

初期値:false
trueの場合、クローズボタンが非表示になり、背景クリック・escキーでポップアップを閉じることができなくなります。
こちらの例で使用しているmarkupを利用して、.mfp-closeをカスタマイズすれば閉じるボタンをつけることができます。
modalがfalseの場合は、
<div class="mfp-close"></div>
が
<button title="Close (Esc)" type="button" class="mfp-close"></button>
に置き換わるのですが、
trueの場合は

は置き換わらないので、カスタマイズができます。

alignTop

初期値:false
trueにした場合、ポップアップは中央にではなく上に揃えられます。

index

初期値:null
gallery時に使用されます。開始インデックスを設定します。ポップアップがDOM要素から初期化されている場合、このオプションは無視されます。

fixedContentPos

初期値:auto
"auto",true,falseの3つが設定できます。
trueにすると、ポップアップコンテンツにposition:fixed;が適用されます。
falseにすると、ポップアップコンテンツにposition:absolute;適用されます。
autoの場合は、ブラウザがposition:fixed;をサポートしていない場合にはposition:absolute;が適用されます。

fixedBgPos

初期値:auto
fixedContentPosと同じで、背景オーバーレイのpositionに関するオプションです。

overflowY

初期値:auto
ポップアップのスクロールバーを設定できます。cssプロパティの「overflow-y」として機能します。

removalDelay

初期値:0
ポップアップが閉じるときの遅延時間を設定できます。
animationオプションを設定するときに使用します。

closeMarkup

初期値:<button title="%title%" type="button" class="mfp-close">×</button>
閉じるボタンのマークアップ。％title％はオプションtCloseに置き換えられます。

autoFocusLast

初期値:true
trueにした場合、ポップアップ前の最後のフォーカスされた要素がポップアップ終了後にフォーカスされます。

galleryオプション

galleryのオプションではポップアップの内容を切り替えたり、ナビゲーションの矢印を追加したりできます。
galleryオプションを使えば、ポップアップの状態のまま次の画像へと遷移できるので、写真を多く掲載するサイトでは使えるオプションです。
galleryオプションは下記のように書きます。

$('.gallery-item').magnificPopup({
  type: 'image',
  gallery:{
   enabled: true,
   preload: [0,2],
   navigateByImgClick: true,
   arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>', 
   tPrev: 'Previous (Left arrow key)',
   tNext: 'Next (Right arrow key)',
   tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
  }
});

オプションがたくさんありますが、gallery:{ enabled: true } を書けば、とりあえずgallery機能を使えるようになります。

またgalleryオプションを使う時に1つ気をつけることがあります。
まずは下記「gallery1」と「gallery2」のポップアップを見比べてみてください。

gallery1

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

gallery2

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

gallery1は6枚全部ギャラリーになっていたのに対し、gallery2は3枚ずつギャラリーになっています。
2つのhtmlは一緒なのですが、jsの書き方が少し違います。

gallery2はeach()メソッドを使用することで、.galleryごとにmagnificPopup()を設定しているので、ギャラリーが別々になります。ここは使用する場合に応じて、気をつけて設定したいです。

gallery1 jsの記述

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

gallery2 jsの記述

$(function() {
  $('.gallery').each(function(){
    $(this).magnificPopup({
      delegate: 'a',
      type:'image',
      gallery: {
        enabled: true
      }
    });
  });
});

ここからgalleryオプションを説明していきたいと思います。

enabled

初期値:false
galleryオプションの有効/無効を設定します。

preload

preloadオプションはポップアップ表示されている前後の画像をプリロードするためのオプションです。
例えばpreload[1,1]だと前後1枚ずつプリロードします。preload[0,2]だと、後の2枚をプリロードします。

navigateByImgClick

初期値:true
コンテンツの写真をクリックして、次の写真を表示するかどうかを設定します。

arrowMarkup

初期値:'<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>'
左右の矢印のマークアップ。
%title%には「左の矢印」は「tPrev」の内容、「右の矢印」は「tNext」の内容が入ります。
%dir%には「左の矢印」は「left」、「右の矢印」は「right」が入ります。

tPrev

初期値:'Previous (Left arrow key)'
「左の矢印」のtitle内容を設定

tNext

初期値:'Next (Right arrow key)'
「右の矢印」のtitle内容を設定

tCounter

初期値:'<span class="mfp-counter">%curr% of %total%</span>'
カウンターのマークアップ。
%curr%は表示中のインデックス番号、%total%は全てのポップアップの枚数。

lazyLoad

lazyLoadオプションはpreloadオプションでプリロードしたアイテムを取得します。
例えば下記のように書けば前後のポップアップコンテンツが1つずつ返ってきます。

$(function() {
  $('.gallery').each(function(){
    $(this).magnificPopup({
      delegate: 'a',
      type:'image',
      gallery:{
        enabled: true,
        preload:[1,1]
      },
      callbacks: {
        lazyLoad: function(item) {
          console.log(item);
        }
      }
    });
  });
});

animationオプション

こちらはオプションではないですが、ポップアップが開かれた後「mfp-ready」クラスが追加され、
ポップアップが閉じるときは「mfp-removing」が追加されてから、削除されます。
こちらを利用してcssアニメーションをつけることができます。

以下はフェードのアニメーションを付けた例です。

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

removalDelayの設定をしないと、ポップアップが閉じる時にすぐポップアップコンテンツが削除されてしまいアニメーションにならないため、removalDelayを設定します。

retinaオプション

retinaオプションは高解像度画面対応のため、高解像度のときは高解像度画像を表示できます。これはコンテンツタイプ「image」のときにしか動作せず、window.devicePixelRatio > 1のときに動作します。

retinaオプションは以下のように書きます。

$(function() {
 $('.image-link').magnificPopup({
   type: 'image',
   retina: {
     // window.devicePixelRatio == 2のときに発火
     ratio: 2,
     
     replaceSrc: function(item, ratio) {
       //表示する画像のソースを取得
       var imgSrc = item.src;

       //画像パス置換（例 img.jpg → img@2x.jpg）
       return imgSrc.replace(/\.\w+$/, function(m) { return '@2x' + m; });
     }
   }
 });
});

またwindow.devicePixelRatioによって表示させる画像を変えたい場合もあると思います。そんなときは下記のように書きます。

下記のものは window.devicePixelRatio が1.5以下のときはratioの値を1.5に、window.devicePixelRatio が1.5より大きいときはratioの値を2にしています。
（ window.devicePixelRatio == 1 のときはそもそもretinaオプションが動かないので、条件式から 1 < window.devicePixelRatio は省いています）

その後画像パスを置換する際に、img.jpgをimg.@【ratio】x.jpgに置換するようにしています。

$(function() {
 $('.image-link').magnificPopup({
   type: 'image',
   retina: {
     ratio: function() {
       if(  window.devicePixelRatio <= 1.5){
         return 1.5;
       }else{
        return 2;
       }
     },
     replaceSrc: function(item, ratio) {
       //表示する画像のソースを取得
       var imgSrc = item.src;

       //画像パス置換
       return imgSrc.replace(/\.\w+$/, function(m) { return '@'+ratio+'x' + m; });
     }
   }
 });
});

zoomオプション

zoomオプションはコンテンツタイプ「image」のときにしか使用できません。どのような挙動になるか最初に見てみましょう。

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

zoomエフェクトは最低限以下の記述があれば動きます。
durationはエフェクトの時間、easingはイージングの種類を指定します。
イージングはcssアニメーションで指定できるものです。種類についてはcssアニメーション transition-timing-function一覧を参照ください。

$(function() {
  $('.popup-btn').magnificPopup({
    type:'image',
    zoom: {
      enabled: true,
      duration: 300,
      easing: 'ease-in-out'
    }
  });
});

このzoomオプションですが、クリックする要素は表示される画像と同じか、リサイズした画像にすることが通常だと思います。ですので、クリックされる要素の中にimgタグがないと正常に動きません。

ただどうしてもimgタグを使用できない場合は以下のようにopener関数を使用して、imgタグ以外でも正常に動かすことができます。

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

今回はMagnific Popupのオプションについて簡単に説明しました。しかしまだ、紹介できていないことがありますので、また続きで記事を書いていきたいと思います。

次は単純にカスタマイズ方法に絞って書けたらいいかな...

searchKeywords

sellBlog Taglist

boltおすすめ記事

WEB上でのし紙をカスタマイズして印刷ができる「熨斗プリント」を作りました

検索結果をリアルタイムで表示させる

Google reCAPTCHA v2を自作フォームに実装する