Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズする方法!

Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズする方法について紹介します。Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズすることでより魅力的なポップアップを作成しましょう。

コンテンツ [表示]

  1. 1Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズしたい
  2. 2Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズする方法
  3. 2.1閉じるボタンをカスタマイズする方法
  4. 2.2矢印をカスタマイズする方法
  5. 2.3カウンターをカスタマイズする方法
  6. 3まとめ

Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズしたい

Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズしてより魅力的なポップアップを作成したいという時があります。

こんな時どのようにすればいいのか以降の項目で紹介します。

Photo byStockSnap

Magnific Popupの閉じるボタン・矢印・カウンターをカスタマイズする方法

ではMagnific Popupの閉じるボタン・矢印・カウンターをカスタマイズする方法を順番に見ていきましょう。

閉じるボタンをカスタマイズする方法

ではまず閉じるボタンをカスタマイズする方法を見ていきましょう。

早速ですがサンプルコードを用いて挙動を見てみましょう。後にサンプルコードの解説します。

画像をクリックすると、閉じるボタンがカスタマイズされていることが分かります。

ではサンプルコードの解説を行います。

解説

jQueryにポップアップさせたい要素にmagnificPopup関数を適用し、typeを画像なのでimageとします。そしてmarkupにアレンジしたい閉じるボタンのHTMLを記述します。

アレンジした閉じるボタンはそのままだと機能しないので、閉じるボタンが押されたらポップアップが閉じるための関数を用意します。
それが今回ではcloseBtnの部分です。

closeBtn関数内のmagnificPopup('close')でポップアップが閉じるようになっています。

そして閉じるボタン機能はポップアップが表示されているときのみ適用したいので、callbacksopenオプションにcloseBtn()を適用させます。

CSSの方は閉じるボタンの位置などを記述しているだけなので、適宜調整してください。

矢印をカスタマイズする方法

では次に矢印をカスタマイズする方法を紹介します。

まずサンプルコードを用いて挙動を見てみましょう。

画像をクリックしていただけると、このように矢印がカスタマイズされていることが分かります。

ではコードの解説を行います。

jQueryの解説

まずポップアップさせたい要素に対してmagnificPopup関数を適用させます。

そして、delegateによってクリックするとポップアップ表示する子要素のセレクタを指定します。
typeは画像なのでimageとします。

galleryオプションではポップアップの内容を切り替えたり、ナビゲーションの矢印を追加したりできます。
galleryオプションを使えば、ポップアップの状態のまま次の画像へと遷移できるので、写真を多く掲載するサイトでは使えるオプションです。
enabled: truegalleryオプションが利用可能となります。

そして今回は矢印ボタンを追加したいのでarrowMarkupに設定を記述します。
またarrowMarkupの中の%dir%にはleftrightが入ります。

「矢印の配置を調整する関数」では、矢印ボタンの位置をmarginで調整しています。
そしてこの関数をポップアップが表示されている時のみ、適用させるために、callbacksでそれぞれ設定しています。

具体的には、ポップアップコンテンツが開いた後(open)、ポップアップコンテンツが切り替わった後(change)、ポップアップコンテンツが開いており、リサイズされた後(resize)です。

CSSの解説

それぞれの矢印を><とするために擬似要素を用いて設定しています。

またwindowサイズが小さくなった時にポップアップ画像が画面いっぱいで表示されると矢印が隠れてしまう問題に対処するために、ポップアップのコンテナの左右にpaddingを持たせて、余白を作るために.mfp-containerpaddingを指定します。

この他のCSSの内容では特に特別なことはしていません。適宜調整して使用してください

カウンターをカスタマイズする方法

最後にカウンターをカスタマイズする方法について紹介します。

こちらはMagnific PopupのオプションであるtCounterを使用するのみです。

では実際にサンプルコードを用いて挙動を見てみましょう。

画像をクリックしていただくと、このようにカウンターがカスタマイズされていることが分かります。

ではサンプルコードの解説を行います。

解説

jQueryの方でポップアップさせたい要素にmagnificPopup関数を、またdelegateによってクリックするとポップアップ表示する子要素のセレクタを指定します。
typeは画像なのでimageとします。

そしてgallery内にあるtCounterオプションを使用します。
tCounter内の%curr%は現在のページ数を、%total%はトータルのページ数を表しています。

そしてCSSの方では.mfp-counterでカウンターの位置を設定しています。
CSSは好みに合わせて適宜調整してください。

まとめ

いかがでしたでしょうか?

ここで紹介したようにMagnific Popupは様々なカスタマイズを行うことが可能です。

ぜひオリジナルのポップアップを作成してみてください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次