デモで覚える!Magnific Popupの使い方【オプション編】

CODE
のり
のり

Magnific Popupのオプションについて、もっと詳しく知りたい!

そんな要望に答えます。

前回までは、基本的な使い方についてまとめましたが、今回は応用として色々あるオプションについてまとめていきたいと思います。可能な限りCODEPENのデモを記載しましたので参考にしてください。

一般的なオプション

一般的なオプションについて見ていきましょう。オプションを複数設定するときは、コンマで区切る必要があります。

type
初期値:Inline
ライトボックスのコンテンツタイプを設定します。コンテンツタイプについては、基本編のコンテンツタイプを参照してください。

delegate
初期値:null
親要素のセレクタを指定すると子要素がポップアップの対象となるオプション。デモは、基本編の単体での表示方法を参照してください。

item
初期値:null
ライトボックスの初期化を定義します。デモは、基本編のitemsオプションを使って表示するを参照してください。

disableOn
初期値:null
ウィンドウの幅がこのオプションの数値より小さい場合、ライトボックスは開かれず無効になります。以下の例では、画面のサイズが400px未満の場合に動作は無効になります。(CODEPENの下にある0.5xにすると機能します)

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

また、以下のようにFunctionで書くこともできます。有効にする場合はtrueを、無効にする場合はfalseを設定します。

main.js
$('.popup-link').magnificPopup({
  disableOn: function() {
    if( $(window).width() < 400 ) {
      return false;
    }
    return true;
  }
});

key
初期値:null
「key」オプションは、同じ構造を持つポップアップの単一またはグループの一意の識別子です。定義しない場合、ポップアップを開いたり閉じたりするたびにDOM要素が作成および破棄されます。

midClick
初期値:false
midClickはtrueに設定すると、マウスのミドルボタンをクリックした場合、またはCommand / Ctrlキーでクリックした場合にライトボックスが開きます。

main.js
$('.popup-link').magnificPopup({
   midClick: true
});

mainClass
初期値:empty string
mainClassを設定すると、ライトボックス全体を囲う<div>要素にクラスを追加できます。

main.js
$('.popup-link').magnificPopup({
  mainClass: "myclass"
});

preloader
初期値:true
preloaderがtrueの場合は、ライトボックスのコンテンツが読み込めない時に「The content could not be loaded.」が表示されますが、falseの場合は何も表示されません。

また、trueの場合はライトボックスの要素に以下のクラスが付きます。.mfp-preloaderクラスと合わせて、エラーメッセージのCSSを変更することも可能です。

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

/* コンテンツの読み込みが成功した時につくクラス */
.mfp-s-ready { }

/* コンテンツの読み込みエラーの時につくクラス */
.mfp-s-error { }

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

focus
初期値:empty string
focusは、Inlineでライトボックス内にinput要素などがある時にフォーカスさせるオプションです。

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

closeOnContentClick
初期値:false
ユーザーがそのコンテンツをクリックしたときにポップアップを閉じます。ポップアップに画像のみがある場合は、このオプションを有効にすることをお勧めします。

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

closeOnBgClick
初期値:true
ユーザーがダークオーバーレイをクリックしたときにポップアップを閉じます。

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

closeBtnInside
初期値:true
trueの場合、ポップアップコンテンツの中に閉じるボタンが表示されます。falseの場合、ポップアップコンテンツの外に閉じるボタンが表示されます。

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

showCloseBtn
初期値:true
閉じるボタンを表示するかどうかを制御します。trueの場合、閉じるボタンを表示、falseの場合は非表示になります。

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

enableEscapeKey
初期値:true
エスケープキーを押すとアクティブなポップアップを閉じるかどうかを制御します。

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

modal
初期値:false
trueに設定すると、ポップアップはモーダルのような動作になります。通常の手段(閉じるボタン、エスケープキー、またはオーバーレイをクリックする)でポップアップを閉じることはできません。

マークアップなどでカスタマイズをする場合などに使用します。closeOnContentClick、closeOnBgClick、showCloseBtn、およびenableEscapeKeyをfalseに設定するショートカットのようなものです。

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

alignTop
初期値:false
trueに設定すると、ポップアップは中央ではなく上部に配置されます。

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

index
初期値:null
ギャラリーに使用し、開始インデックスを定義します。 DOM要素からポップアップが初期化される場合、このオプションは無視されます。

fixedContentPos
初期値:auto
ポップアップコンテンツの位置を制御します。 “auto”、true、falseが設定可能です。 trueに設定すると、固定位置(position:fixed;)が使用され、falseに設定すると、現在のスクロールに基づく絶対位置(position:absolute;)になります。ブラウザが固定位置を適切にサポートしていない場合、autoに設定すると、このオプションは自動的に無効になります。

fixedBgPos
初期値:auto
オーバーレイの位置プロパティを定義します。fixedContentPosと内容は同じです。

overflowY
初期値:auto
ポップアップのスクロールバーを定義し、CSSのoverflow-yとして機能します。こちらがサンプルになります。

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

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

prependTo
初期値:document.body
ポップアップが追加されるDOM要素を定義します。

autoFocusLast
初期値:true
trueに設定すると、ポップアップ表示の前にフォーカスされた最後のフォーカス要素がポップアップのクローズ後もフォーカスされます。

Magnific Popup – Options

Galleryオプション

ギャラリーモジュールを使用すると、ポップアップのコンテンツを切り替えたり、ナビゲーション矢印を追加したりできます。画像だけでなく、あらゆる種類のコンテンツを切り替えて混在させることができます。

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

Galleryオプションの例です。

main.js
gallery: {
  enabled: false, // ギャラリーを有効にするにはtrueに設定します
  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>' // カウンターのマークアップ
}

enabled
初期値:false
trueの場合、ギャラリー表示を有効にします。

navigateByImgClick
初期値:true
trueの場合、ポップアップされたイメージをクリックすると次のイメージに遷移します。

arrowMarkup
初期値:

<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>

ナビゲーションの矢印のマークアップを設定します。
%title%tPrevtNextのオプションで設定可能です。
%dir%には、左の矢印の場合leftが、右の矢印の場合はrightが入ります。

classを独自のものにすると矢印のカスタマイズが可能です。

tPrev
初期値:’Previous (Left arrow key)’
前に戻る左側の矢印ボタンのタイトルを設定します。カーソルオーバーすると表示されます。

tNext
初期値:’Next (Right arrow key)’
次に進む右側の矢印ボタンのタイトルを設定します。カーソルオーバーすると表示されます。

Lazy-loading (preload)

preloadオプションは、ギャラリーのコンテンツの前後をプリロードします。オプションの指定方法は以下のようにします。

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

preload:[1,3]の最初の数字は、クリックしたコンテンツのインデックスよりの前のコンテンツをプリロードするアイテムの数です。 2番目の数字は、クリックしたコンテンツのインデックスより後のコンテンツがプリロードするアイテムの数です。

デフォルトでは、画像タグを検索してJavaScriptでプリロードするだけです。ただし、callbacksのlazyLoadイベントを使用することで拡張し、カスタムのプリロードロジックを実行できます。

Multiple galleries

1つのページに複数のギャラリーを配置する場合、.each(function(){});を使うことで、個別のギャラリーを作成することができます。

以下の例では、上下に3枚づつ画像があり、同じgalleryクラスを持っています。.each(function(){});を使用しない場合は、まとめて6枚のギャラリーとして表示されますが、以下のように3枚づつ別のギャラリーが表示されるはずです。

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

Magnific Popup – Gallery

Animationオプション

アニメーションはオプションとは少し違い、いままで見てきた様々な例で適用可能です。ポップアップが開かれた後に、全体を覆う<div>要素にmfp-readyクラスが追加され、ポップアップが削除される前に、mfp-removingクラスが追加されます。

例を見てみた方がわかりやすいです。

main.js
$('.popup-link').magnificPopup({
  removalDelay: 300, // ポップアップが削除されるまでの秒数(ミリ秒単位)
  mainClass: 'mfp-fade' // なくても良いですが、クラスを追加することでCSSの実装幅が増えます
});
main.css
/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

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

Magnific Popup – Animation

Retinaオプション

Retinaオプションを使用すると、高解像度の画像を高解像度で画面に表示することができます。これはコンテンツタイプが image タイプでのみで、window.devicePixelRatio > 1の場合にのみ機能します。

index.html
<a href="image.jpg" class="image-link">Open popup</a>
main.js
$('.image-link').magnificPopup({
  type: 'image',

  retina: {
    ratio: 1, // Retina画像のサポートを有効にするには、この数を増やします。
              // ポップアップ内の画像はこの数だけ縮小されます。
  }

    replaceSrc: function(item, ratio) {
      return item.src.replace(/\.\w+$/, function(m) { return '@2x' + m; });
    } // 画像ソースを変更する機能
  }

});

Magnific Popup – Retina

Zoom effectオプション

ズームは画像に対してのみ機能します。簡単なデモを見てみましょう。

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

次の手順で適用していきます。

1)ポップアップを開くリンク付きのサムネイルを追加します。

index.html
<a href="image.jpg" class="image-link">
   <img src="thumbnails.jpg" />
</a>

2)ズームオプションでポップアップを初期化します。

main.js
$('.image-link').magnificPopup({
  type: 'image',
  mainClass: 'mfp-with-zoom', // このクラスは、以下のCSSアニメーション用です
  zoom: {
    enabled: true, // デフォルトはfalse。trueにすることを忘れない。
    duration: 300, // ズームにかかる時間(ミリ秒)
    easing: 'ease-in-out', // イージングの種類を指定します
    opener: function(openerElement) { // 「opener」関数は、img要素を設定できない場合にします。
      return openerElement.is('img') ? openerElement : openerElement.find('img');
    }
  }

});

3)オプションで、CSSフェードアニメーションを背景オーバーレイに追加できます

main.css
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

Magnific Popup – Zoon effect

まとめ

いかがでしたか?

今回はMagnific Popupのオプションについてまとめてみました。基本的に公式サイトのドキュメントを元に作成していますが、完全に理解して書けているわけではないので、是非公式サイトも参考にしてください。

コメント

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