https://www.lens-apple.jp/Magnific-Popup/ext/mfp-default.js

1var app = app || {};
2
3// data-mfp-close-btnの値が'fixed'だった場合、閉じるボタンをコンテンツの外側に配置して固定する
4app.mfpAfterGetCloseBtnProp = function(st) {
5  var btnSide = st.el.attr('data-mfp-close-btn');
6  if(btnSide==='fixed'){
7    st.closeBtnInside = false;
8  }
9};
10
11// data-mfp-effect取得後、エフェクト名のクラスを付与。取得できなかった場合は、removalDelayを0にする
12app.mfpAfterGetEffectProp = function(st) {
13  var effect = st.el.attr('data-mfp-effect');
14  if(effect){
15    st.mainClass = effect;
16  }else{
17    st.removalDelay = 0;
18  }
19};
20
21// body固定・固定解除
22app.mfpBodyFixedToggle = function(scrollY) {
23  if ( $('body').hasClass('mfp-bg-fix') ) {
24    $('html,body').removeClass('mfp-bg-fix');
25    document.body.style.removeProperty('top');
26    $(window).scrollTop(scrollY);
27    if (app.resumeHeaderFixed) app.resumeHeaderFixed();
28  } else {
29    if (app.suspendHeaderFixed) app.suspendHeaderFixed(); //ヘッダーバナーがオーバーレイより前に出ないようにする
30    $('html,body').addClass('mfp-bg-fix');
31    document.body.style.setProperty('top', `${-1 * scrollY}px`, 'important');
32  }
33};
34
35// 単体画像を表示させる
36app.mfpImage = function(selector) {
37  var $target = selector ? $(selector) : $('.js_mfp_image');
38  $target.magnificPopup({
39    type: 'image',
40    removalDelay: 500, //delay removal by X to allow out-animation
41    callbacks: {
42      beforeOpen: function() {
43        app.mfpAfterGetCloseBtnProp(this.st);
44        app.mfpAfterGetEffectProp(this.st);
45        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
46      }
47    }
48  });
49};
50
51// iframeを表示させる
52app.mfpIframe = function(selector) {
53  var $target = selector ? $(selector) : $('.js_mfp_iframe');
54  $target.magnificPopup({
55    type:'iframe',
56    removalDelay: 500,
57    callbacks: {
58      beforeOpen: function() {
59        app.mfpAfterGetCloseBtnProp(this.st);
60        app.mfpAfterGetEffectProp(this.st);
61
62        // トリガーとなる要素のhrefで判別してiframeの表示サイズを制御する
63        var iframeSize;
64        if(this.st.el[0].href.indexOf('youtube.com') != -1) {
65          // Youtubeの場合、通常のクラスを定義する（16/9の比率になる）
66          iframeSize = 'mfp-iframe-scaler mfp-with-anim';
67        } else {
68          // Youtube以外の場合、画面フルサイズのクラスを定義する
69          iframeSize = 'mfp-iframe-scaler mfp-iframe-full mfp-with-anim';
70        }
71        
72        this.st.iframe.markup = this.st.iframe.markup.replace('mfp-iframe-scaler', iframeSize);
73
74        // スクロール値を取得
75        this.current_scrollY = $(window).scrollTop();
76      },
77      open: function() {
78        app.mfpBodyFixedToggle(this.current_scrollY);
79      },
80      close: function() {
81        app.mfpBodyFixedToggle(this.current_scrollY);
82      }
83    }
84  });
85};
86
87// インラインコンテンツ（特大サイズ）を表示させる
88app.mfpInline = function(selector) {
89  var $target = selector ? $(selector) : $('.js_mfp_inline');
90  $target.magnificPopup({
91    type:'inline',
92    removalDelay: 500,
93    callbacks: {
94      beforeOpen: function() {
95        app.mfpAfterGetCloseBtnProp(this.st);
96        app.mfpAfterGetEffectProp(this.st);
97        // スクロール値を取得
98        this.current_scrollY = $(window).scrollTop();
99      },
100      open: function() {
101        app.mfpBodyFixedToggle(this.current_scrollY);
102      },
103      close: function() {
104        app.mfpBodyFixedToggle(this.current_scrollY);
105      }
106    }
107  });
108};
109
110// インラインコンテンツ（ダイアログ）を表示させる
111app.mfpDialog = function(selector) {
112  var $target = selector ? $(selector) : $('.js_mfp_dialog');
113  $target.magnificPopup({
114    type: 'inline',
115    removalDelay: 500,
116    callbacks: {
117      beforeOpen: function() {
118        app.mfpAfterGetCloseBtnProp(this.st);
119        app.mfpAfterGetEffectProp(this.st);
120      }
121    }
122  });
123};
124
125// Ajaxコンテンツを表示させる
126app.mfpAjax = function(selector) {
127  var $target = selector ? $(selector) : $('.js_mfp_ajax');
128  $target.magnificPopup({
129    type:'ajax',
130    ajax: {
131      settings: null, // jQueryのajaxオプションで設定できます http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
132      tError: '<a href="%url%">The content</a> could not be loaded.' // ローディングが失敗したときのエラーメッセージ
133    },
134    callbacks: {
135      beforeOpen: function () {

136        app.mfpAfterGetCloseBtnProp(this.st);
137        app.mfpAfterGetEffectProp(this.st);
138        // スクロール値を取得
139        this.current_scrollY = $(window).scrollTop();
140      },
141      open: function() {
142        app.mfpBodyFixedToggle(this.current_scrollY);
143      },
144      close: function() {
145        app.mfpBodyFixedToggle(this.current_scrollY);
146      }
147    }
148  });
149};
150
151app.mfpInit = function() {
152  app.mfpImage();
153  app.mfpIframe();
154  app.mfpInline();
155  app.mfpDialog();
156  app.mfpAjax();
157};
158
159$(function(){
160  app.mfpInit();
161});