フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

「Magnific Popup」の矢印、閉じるボタン、カウンターのカスタマイズ

「Magnific Popup」の矢印、閉じるボタン、カウンターのカスタマイズ

「Magnific Popup」については、下記2つの記事でを紹介してきました。
「Magnific Popup」の導入方法などを知りたい人は『よく使うjQueryプラグイン② 「Magnific Popup」』を参考にしてください

今回は「Magnific Popup」の矢印、閉じるボタン、カウンターのカスタマイズ方法を紹介していきたいと思います。

目次

  1. 「矢印」のカスタマイズ方法
  2. 「閉じるボタン」のカスタマイズ方法
  3. 「カウンター」のカスタマイズ方法

「矢印」のカスタマイズ方法

galleryオプションを使用した時には、「前へ」「次へ」の矢印が表示されます。
この「前へ」「次へ」の矢印（arrow）をカスタマイズする方法を紹介いたします。

まず最初はgalleryオプションをtrueにするので、以下のようにhtmlとjsを記述します。

html

<div id="wrappr">
  <div class="gallery">
    <a href="【ポップアップで表示する画像】" class="popup-img"><img src="【サムネイルで表示する画像】" alt=""></a>
    <a href="【ポップアップで表示する画像】" class="popup-img"><img src="【サムネイルで表示する画像】" alt=""></a>
    <a href="【ポップアップで表示する画像】" class="popup-img"><img src="【サムネイルで表示する画像】" alt=""></a>
  </div>
</div>

js

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

「矢印」のカスタマイズでは「arrowMarkup」を使用します。
arrowMarkupの説明はこちらを確認してください。

「arrowMarkup」で矢印のマークアップを変更して、cssでカスタマイズをします。
気を付けなくていけないのは、「前へ」の矢印と「次へ」の矢印両方とも「arrowMarkup」でマークアップを変更するということです。

arrowMarkupの初期値は
<button title="%title%" type="button" class="mfp-arrow c-mfp-arrow-%dir%"></button>
なのですが、%dir%の箇所に、「前へ」の矢印の場合は「right」、「次へ」の矢印の場合は「left」が入ります。
これを利用して、マークアップをします。

cssとjsを下記のように記述してみます。デモも作成したので、確認してみてください。

css

.gallery-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
  background-color: #fff;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.gallery-arrow-left{
  left: 30px;
}
.gallery-arrow-left:before{
  content:'<';
  color: #000;
}
.gallery-arrow-right{
  right: 30px;
}
.gallery-arrow-right:before{
  content:'>';
  color: #000;
}

js

$(function() {
  $('.gallery').magnificPopup({
    delegate: 'a',
    type:'image',
    gallery: {
        enabled: true,
        arrowMarkup: '<span title="%title%" role="button" class="gallery-arrow gallery-arrow-%dir%"></span>'
    }
  });
});

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

矢印がカスタマイズ出来ているのが確認できたと思います。
しかし少しこれでは使いづらい部分があります。それはwindowサイズが小さくなった時にポップアップ画像が画面いっぱいで表示されると矢印が隠れてしまうことと、windowサイズが大きくなった時にポップアップ画像と矢印が離れすぎてしまうことです。

以下のような方法で改良してみたいと思います。

  • windowサイズが小さくなった時にポップアップ画像が画面いっぱいで表示されると矢印が隠れてしまう
    → ポップアップのコンテナの左右にpaddingを持たせて、余白を作る。
  • windowサイズが大きくなった時にポップアップ画像と矢印が離れすぎてしまう
    →ポップアップのコンテナのwidthを取得して、それにより矢印の位置を決定する。

以上を考慮して作成したデモが以下のものです。埋め込みではよく分からないとは思うので、codepenのサイトで確認してみてください。

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

まず「ポップアップのコンテナの左右にpaddingを持たせて、余白を作る。」ですが、ポップアップのコンテナは「mfp-container」のクラス名をdivタグで囲まれているので、下記のように.mfp-containerにpaddingを指定します。

.mfp-container {
    padding-left: 60px;
    padding-right: 60px;
}

次に「ポップアップのコンテナのwidthを取得して、それにより矢印の位置を決定する。」ですが、以下のcssとjsの記述部分で指定しています。

css

.gallery-arrow{
  position: absolute;
  left: 50%;
}

cssでは矢印ボタンをあらかじめ、中央に配置しています。

js

$(function() {
  $('.gallery').magnificPopup({
    callbacks: {
      change: function() {
        galleryArrowPosition();
      },
      resize: function() {
        galleryArrowPosition();
      },
      open: function() {
        galleryArrowPosition();
      }
    }
  });
});


var arrowWidth = 30; //矢印ボタンのwidth
var arrowGap = 20;   //矢印ボタンとポップアップコンテナの距離

//矢印の配置を調整する関数
function galleryArrowPosition(){
  var contWidth = $('.mfp-content').width();       // .mfp-contentのwidth取得
  var left = contWidth/2 + arrowGap + arrowWidth;  //「前へ」ボタンの調整量
  var right = contWidth/2 + arrowGap;              //「次へ」ボタンの調整量
  $('.gallery-arrow-left').css('margin-left','-'+left+'px');
  $('.gallery-arrow-right').css('margin-left',right+'px');
}

「矢印の配置を調整する関数」で矢印ボタンの位置をmarginで調整しています。

次に大事なのはこの関数を動かすタイミングです。そもそもポップアップコンテンツが表示されていないと、エラーになるので、適切なタイミングで動かすことが大切です。私は以下の3つのタイミングでこの関数を動かしています。

以下のイベントは「Magnific Popup」のcallbacksオプションで用意されています。
（ ）内にイベント名を併せて記述していますので、参考にしてください。

  1. ポップアップコンテンツが開いた後（open）
  2. ポップアップコンテンツが切り替わった後（change）
  3. ポップアップコンテンツが開いており、リサイズされた後（resize）

「閉じるボタン」のカスタマイズ方法

次は「閉じるボタン」のカスタマイズ方法についてですが、いくつかの方法があります。
どのようにカスタマイズしたいかによって、好きな方法を選んでください。

「閉じるボタン」のカスタマイズ方法

  1. 「閉じるボタン」を非表示にしたい
  2. 「閉じるボタン」のアイコンを変えたい
  3. 「閉じるボタン」のマークアップから変えてカスタマイズしたい

「閉じるボタン」を非表示にしたい

オプション「showCloseBtn」をfalseにすれば非表示になります。
以下のように記述してください。

$(function() {
  $('【クリックする要素】').magnificPopup({
    showCloseBtn: false
  });
});

「閉じるボタン」のアイコンを変えたい

オプション「closeMarkup」を指定します。
下記の【閉じるボタン】を画像だったり、「閉じる」といったテキストだったり、と指定すれば、「閉じるボタン」のアイコンを変える事ができます

$(function() {
  $('【クリックする要素】').magnificPopup({
    closeMarkup: '<button title="%title%" type="button" class="mfp-close">【閉じるボタン】</button>'
  });
});

「閉じるボタン」のマークアップから変えてカスタマイズしたい

「閉じるボタン」のマークアップから変えてカスタマイズをするには「Magnific Popup」ので用意されているオプション、イベント（callbacksオプション）、メソッドを利用します。

先に作成したデモを確認してみてください。

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

デモでは閉じるボタンを2つ付けて、マークアップは最初に用意されているものではなく、オリジナルで作成した閉じるボタンを使用しています。

まずは閉じるボタンのマークアップ方法から見ていきます。
jsの以下の記述部分で、ポップアップコンテナの中身のマークアップを変更しています。
デモはコンテンツタイプが「image」なので、<div class="mfp-img"></div>の箇所が、実際は画像に置換されます。
この画像を挟むようにして
<div class="close-btn close-icon" role="button">&#215;</div>と
<div class="close-btn close-bottom" role="button">閉じる</div>
がありますが、これが2つの閉じるボタンになります。

他のコンテンツタイプのマークアップに関してはこちらのコンテンツタイプ「iframe」などを参考にしてください。

type:'image',
image: {
  markup: '<div class="mfp-figure">'+
  '<div class="close-btn close-icon" role="button">&#215;</div>'+
  '<div class="mfp-img"></div>'+
  '<div class="close-btn close-bottom" role="button">閉じる</div>'+
  '</div>',
}

上記のマークアップに変更するとカスタマイズされた「閉じるボタン」表示はされますが、「閉じるボタン」をクリックしても、ポップアップが閉じてくれません。

通常「Magnific Popup」では「mfp-close」のクラスを持った要素をクリックすると、ポップアップが閉じるようになっています。
しかし、「.mfp-close」に適用されるスタイルが「Magnific Popup」同梱のcssにスタイルが記述されているため、余計なスタイルが多く指定されてしまいます。
同梱のcssの記述を変えてもいいですが、あまりプラグイン自体のカスタマイズはやりたくないと思います。
と言うよりも、別の要素に対してクリックしてもポップアップが閉じるようなメソッド等を用意してあるので、そちらを使いましょう。

そこで今回は「close-btn」のクラスを持った要素をクリックすると、ポップアップが閉じるようにします。
そのための記述は以下の部分です。

「close-btn」のクラスを持った要素をクリックすると、ポップアップが閉じる closeBtn関数

//閉じるボタン
function closeBtn(){
  $('.close-btn').on('click',function(){
    $('.popup-img').magnificPopup('close');
  });
}

magnificPopup('close')のメソッドで、ポップアップが閉じます。

またcloseBtn関数はポップアップが開いた後に実行されないと、「.close-btn」の要素がなくて、エラーになってしまいます。
そのためcallbacksオプションの「open」を利用して、closeBtn関数を実行しています。

callbacks: {
  open: function() {
    closeBtn();
  },
}

「カウンター」のカスタマイズ方法

カウンターのカスタマイズにはオプションの「tCounter」を使用します。
以下のように記述をすれば、「〇〇枚中 △△枚目」と表示されるようになります。
%total%がポップアップコンテンツ合計数で、%curr%が表示中のポップアップコンテンツの番号になります。

$(function() {
  $('.gallery').magnificPopup({
    delegate: 'a', 
    type:'image',
    gallery: {
      enabled:true,
      tCounter:'<span class="-counter">%total%枚中 %curr%枚目</span>'
    }
  });
});

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

また位置を変更したい場合などは、markupのオプションを利用すれば変更できます。
<div class="mfp-counter"></div>の要素内に「tCounter」で指定した要素が入るので、以下のようにすれば画像の上にカウンターが表示されます。
cssの調整は「mfp-counter」や「tCounter」で指定した要素に対して適用すれば問題ないです。

$(function() {
  $('.gallery').magnificPopup({
    delegate: 'a', 
    type:'image',
    gallery: {
      enabled:true,
      tCounter:'<span class="counter">%total%枚中 %curr%枚目</span>'
    },
    image: {
      markup: '<div class="mfp-figure">'+
      '<div class="mfp-close"></div>'+
      '<div class="mfp-counter"></div>'+
      '<div class="mfp-img"></div>'+
      '<div class="mfp-bottom-bar">'+
      '<div class="mfp-title"></div>'+
      '</div>'+
      '</div>', 
    }
  });
});

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

今回は「Magnific Popup」のよくデザイン変更を行いそうな要素のカスタマイズ方法を紹介してきました。
プラグイン自体をカスタマイズするのではなく、できるだけ用意されたオプション等でカスタマイズするようにしましょう。

arrow_circle_up