ロゴ

Blog

Magnific Popupで矢印ボタンの位置変更

Magnific Popupで「inline」ギャラリーを表示するとき、矢印ボタンの位置を、ブラウザ(画面)幅ではなく、コンテンツ(.mfp-content)を基準に配置する場合、プラグインオプションや、CSSでは実現が難しかった。
矢印ボタン(.mfp-arrow)が「.mfp-content」の入れ子になるよう、やむなく「jquery.magnific-popup.js」を修正して対応。

jquery.magnific-popup.js

プラグインファイルの1741行目付近、

mfp.container.append(arrowLeft.add(arrowRight));

下記のように書き換え。

mfp.content.after(arrowLeft.add(arrowRight));

Back to Top