Magnific Popupでポップアップ＆ギャラリーを作る
オプションで色んな使い方ができるjQueryプラグインMagnific PopupでLightboxのようなポップアップギャラリーの作り方を紹介します。
事前準備
Magnific Popupのサイトから必要なファイルをダウンロードして読み込みます。
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="magnific-popup/jquery.magnific-popup.js"></script>
ポップアップ
シンプルに画像をポップアップで表示します。
これには「次へ」、「前へ」といったギャラリー表示はありません。
See the Pen
Magnific Popup – popup by kura (@kuranopen)
on CodePen.
【方法1】要素を直接指定
HTML
<a class="popup" href="https://picsum.photos/id/237/960/540">popup 1</a>
<a class="popup" href="https://picsum.photos/id/238/960/540">popup 2</a>
<a class="popup" href="https://picsum.photos/id/239/960/540">popup 3</a>hrefにポップアップさせたい画像のパス、URLを指定します。
Javscript
$('.popup').magnificPopup({
type: 'image'
});ポップアップリンクのクラスを指定します。
ここでは.popupを指定しています。
【方法2】親要素で指定
親要素で一括指定することもできます。
HTML
<div class="popups">
<a href="https://picsum.photos/id/237/960/540">popup 1</a>
<a href="https://picsum.photos/id/238/960/540">popup 2</a>
<a href="https://picsum.photos/id/239/960/540">popup 3</a>
</div>Javascript
$('.popups').magnificPopup({
type: 'image',
delegate: 'a', //子要素を指定。クラス「.class」のセレクタ指定も可
});画像ギャラリー
ギャラリー機能を使って画像をポップアップで表示します。
「次へ」、「前へ」機能があります。
See the Pen
Magnific Popup – Image gallery by kura (@kuranopen)
on CodePen.
HTML
<div class="gallery">
<a href="https://picsum.photos/id/237/960/540">image1</a>
<a href="https://picsum.photos/id/238/960/540">image2</a>
<a href="https://picsum.photos/id/239/960/540">image3</a>
<a href="https://picsum.photos/id/240/960/540">image4</a>
<a href="https://picsum.photos/id/241/960/539">image5</a>
</div>
Javascript
$(".gallery").magnificPopup({
type: "image", //画像ギャラリーを定義
delegate: "a", //リンク先を含む子要素を指定
gallery: {
enabled: true, //ギャラリーを有効可
}
});
インラインギャラリー
See the Pen
Magnific Popup – Image gallery by kura (@kuranopen)
on CodePen.
ページ内のHTMLをギャラリーとして使用するインラインギャラリーです。
HTML
<!-- ポップアップ一つ -->
<button href="#popup">popup</button>
<div id="popup" class="popup-box mfp-hide">ポップアップ</div>
<!-- ポップアップ複数 -->
<a href="#popup1">popup 1</a>
<a href="#popup2">popup 2</a>
<a href="#popup3">popup 3</a>
<div id="popup1" class="popup-box mfp-hide">popup 1</div>
<div id="popup2" class="popup-box mfp-hide">popup 2</div>
<div id="popup3" class="popup-box mfp-hide">popup 3</div>
.mfp-hideギャラリーに表示する要素に指定。ページ上で非表示／ポップアップで表示を切り替えてくれます。
CSS
.popup-box {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
ポップアップで表示された要素はスタイルがない状態なので、最低限のスタイルを指定します。
Javascript
//単一ポップアップ
$("button").magnificPopup({
type: "inline",
gallery: {
enabled: true,
}
});
// 複数ポップアップ
$("a").magnificPopup({
type: "inline",
gallery: {
enabled: true,
}
});
type: "inline",インラインギャラリーを使用する場合に指定します。
ポップアップアニメーション
See the Pen
Untitled by kura (@kuranopen)
on CodePen.
ポップアップ表示、非表示時をアニメーションにする
CSS
/* オーバーレイ表示開始 */
.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;
}
/* オーバーレイ表示まで */
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
/* オーバーレイ非表示時 */
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
/* コンテンツ表示開始 */
.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;
}
/* コンテンツ表示まで */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
/* コンテンツ非表示時 */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
ポップアップで表示された要素はスタイルがない状態なので、最低限のスタイルを指定します。
Javascript
$('.popup').magnificPopup({
type: 'image',
removalDelay: 300,
mainClass: 'mfp-fade'
});
- CSSのアニメーション設定し、ポップアップにアニメーション用Class
mainClass: 'mfp-fade'を指定 - 要素が先に消えないようにJavascriptに
removalDelay: 300を指定します
オプション
Magnific Popupで使用できるオプションです。
一部翻訳された説明文を記載しています。
disableOn
ウィンドウ幅がこのオプションの数値よりも小さい場合、ライトボックスは開かれず、要素のデフォルトの動作がトリガーされる。
key
同じ構造のポップアップの単一またはグループの一意の識別子。定義しない場合はポップアップを開いたり閉じたりするたびにDOM要素が作成および破棄される。
midClick
trueライトボックスに設定されている場合、ユーザーがマウスの中ボタンをクリックするか、Command / Ctrlキーでクリックすると開きます。
mainClass
ポップアップラッパーのルート要素とダークオーバーレイに追加されるクラスを含む文字列。たとえば”myClass”、には複数のクラスを含めることもできます。
preloader
Magnific Popupのプリローダーは、現在のステータスのインジケーターとして使用されます。
focus
フォーカスする必要があるポップアップ内の要素のCSSセレクターを含む文字列。理想的には、フォーカスできるポップアップの最初の要素である必要があります。たとえば、’input’または’#login-input’。ポップアップ自体に焦点を合わせるには、空のままにします。
closeOnContentClick
ユーザーがポップアップのコンテンツをクリックすると、ポップアップを閉じます。ポップアップに画像しかない場合は、このオプションを有効にすることをお勧めします。
closeOnBgClick
ユーザーが暗いオーバーレイをクリックしたときにポップアップを閉じます。
closeBtnInside
有効にすると、Magnific Popupはポップアップのコンテンツ内に閉じるボタンを配置し、ラッパーはクラスを取得mfp-close-btn-inします。
showCloseBtn
閉じるボタンの表示、非表示。
enableEscapeKey
Escキーを押すと、アクティブなポップアップを閉じるかどうか。
modal
trueを指定するとモーダルのような動作になる。
alignTop
trueを指定すると中央ではなく上に配置される。
index
ギャラリーに使用されます。開始インデックスを定義します。ポップアップがDOM要素から初期化される場合、このオプションは無視されます。
fixedContentPos
ポップアップコンテンツの位置。
fixedBgPos
上記のオプションと同じですが、暗い半透明オーバーレイの位置プロパティを定義。
overflowY
オーバーフロー-yのCSSプロパティとして機能し、ポップアップのスクロールバー-任意のCSS許容値が許可されている
removalDelay
ポップアップがDOMから削除されるまでの遅延。アニメーションに使用される。
closeMarkup
閉じるボタンのマークアップ。
prependTo
ポップアップが追加されるDOM要素。
autoFocusLast
ポップアップが表示される前に最後にフォーカスされた要素に設定されている場合、ポップアップが閉じた後にフォーカスされます。
