baserCMS 「Magnific Popup」 今さらながらの設定方法

モーダルウィンドウのjQueryプラグイン「Magnific Popup 」。
個人的には、枯れた「colorbox 」の方が好みだけれど、いずれもレスポンシブ対応で、一通りのことはできるので、どちらを選ぶかはやはり好みかと。
baserCMSのテーマでは、colorboxの採用実績が明らかに多く、というのも、baserCMSの標準採用のエディター「CKEditor 」から画像をインサートするとき、同じく標準搭載されているアップローダー（プラグイン）の選択画面が呼び出されてリンク付のコードが生成されるのですが、そのコードにcolorboxプラグインの呼び出し用セレクターとして rel="colorbox" 属性が既に仕込まれているからかもしれません。 とはいえ、Magnific Popupでも、 rel="colorbox" 属性を呼び出し用セレクターとして使えばいいだけなので、その辺りをまずは簡単にご紹介します。

例えば、baserCMSで人気の「Omotenashi」「Omotenashi2」テーマでは、Magnific Popupが採用されていて、default.phpのレイアウトファイルには、以下のように記述されています。

    <?php if (!$this->BcBaser->isHome()): ?>
    <script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script>
    <script>
        $(function() {
            //magnific-popup
            $(".popup, .eyeCatch a, .post-body a, #post-detail a").magnificPopup({
                type: 'image',
                mainClass: 'mfp-with-zoom',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false,
                gallery:{enabled:true}
            });
        });
    </script>
    <?php endif ?>

このままだと、ブログ記事内の全てのa要素が「.post-body a」「 #post-detail a」のセレクターに引っかかってしまうため、意図せず、通常のリンクのつもりで書いたコードもMagnific Popupで開こうとしてしまいます。 ですが、Magnific Popupでも同様に rel="colorbox" 属性を利用した書き方などに限定して以下のようにすれば、アップローダーからチョイスした画像は、取り立ててクラス指定などしなくとも無理なくモーダルウィンドウでポップアップさせることができます。

    <?php if (!$this->BcBaser->isHome()): ?>
    <script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script>
    <script>
        $(function() {
            //magnific-popup
            $(".popup, .eyeCatch a, a[rel='colorbox']").magnificPopup({
                type: 'image',
                mainClass: 'mfp-with-zoom',
                removalDelay: 300, //後で指定するcssに合わせて300msに変更
                preloader: false,
                fixedContentPos: true,
                gallery:{enabled:true}
            });
        });
    </script>
    <?php endif ?>

それ以外の（たとえば、直にaタグのリンクコードを書くような）場合は、class="popup" を指定すれば、Magnific Popupで開くこともできます。

続いて、その後のオプションの記述についてです。
「Omotenashi」「Omotenashi-2」テーマでは、上記のようなオプションがあらかじめ記述されているのですが、実際のところそれに付随したcssの記述がされていないため、せっかく書かれているmainClass: 'mfp-with-zoom'などのオプションは機能していません。 なので、これらのテーマをお使いの方は、是非、一手間cssの記述を加えてみて、Magnific Popup本来のファンクションを利用してみてください。

以下が、追加のcssコードのサンプルです。 せっかくなので、少しフワッと表示する感じで transition時間を0.3秒に設定しています。

.mfp-bg{
  opacity: 0;
  transition: opacity .3s;
  background: #FFF !important; /* htmlのオーバレイ背景色を変更したいとき */
}
.mfp-bg.mfp-ready{
  opacity: 0.7;
}
.mfp-bg.mfp-removing{
  opacity: 0;
}
.mfp-wrap .mfp-content{
  opacity: 0;
  transition: all .3s ease-out;
}
.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

また、ポップアップするイメージのサイズが大きすぎると感じるなら、

img.mfp-img {
  max-height: 80vh !important;
}

などとすると調整できます。というのも、この手のモーダルウィンドウのプラグインでサイズ指定する場合のほとんどが max-width 指定のみで調整されていて、近頃をワイドモニターで見ている場合、結構なケースで画像の縦方向が画面から見切れてしまうことが起きるので。

その他のオプションにも興味のある方は、是非こちらのサイト をご覧になってください。素晴らしくまとめられていますので。