フロントの人の雑多メモ

slick.jsとMagnific Popupを使って、スライド要素をモーダル表示する方法

slick.jsとMagnific Popupを使って、スライド要素をモーダル表示する方法

jQueryのスライダープラグイン「slick.js」とモーダル系プラグイン「Magnific Popup」を組み合わせて色々やってみます。

目次

サンプル①

スライド要素をモーダル表示するサンプル。

モーダル表示中はスライダーを一時停止しているのがポイントです。

HTML

こんな感じでHTMLを作成

<!-- CSS -->
<link rel="stylesheet" href="magnific-popup.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- JS -->
<script defer src="jquery.magnific-popup.min.js"></script>
<script defer src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slider">
	<div class="slide"><a href="img01.jpg" class="popup-image"><img src="img01.jpg"></a></div>
	<div class="slide"><a href="img02.jpg" class="popup-image"><img src="img02.jpg"></a></div>
	<div class="slide"><a href="img03.jpg" class="popup-image"><img src="img03.jpg"></a></div>
	<div class="slide"><a href="img04.jpg" class="popup-image"><img src="img04.jpg"></a></div>
</div>

JS

slickは普通に実行。

Magnific Popupのcallbacksに、開く時にスライダーを一時停止する処理と、閉じる時に再スタートする処理を入れています。

$(function(){
	//slick (オプションはお好みで)
	$(".slider").slick({
		autoplay: true,
		centerMode: true,
		variableWidth: true
	});

	//Magnific Popup
	$(".popup-image").magnificPopup({
		type: "image",
		callbacks: {
			elementParse: function(item) { //モーダルを開く時
				//スライダー一時停止処理

				//親要素の「.slider」を取得
				let slider = item.el.closest(".slider");
				//親要素の「.slider」が存在し、クラス「paused」を持っていなければ
				if(slider.length && !slider.hasClass("paused")){
					//親要素の「.slider」を一時停止、クラス「paused」を付与
					slider.slick("slickPause").addClass("paused");
				}
			},
			close: function(){ //モーダルを閉じるとき
				//「.slider.paused」を再開し、クラス「paused」を削除
				$(".slider.paused").slick("slickPlay").removeClass("paused");
			}
		}
	});
});

参考

Magnific Popup Documentation

slickの一時停止方法についてはこちら

【slick.js】スライダーの一時停止・再生ボタンを追加する方法

【slick.js】スライダーの一時停止・再生ボタンを追加する方法

サンプル② ギャラリー表示

スライダー要素をモーダル内でギャラリー表示にするサンプルです。

slickでスライド要素が複製されますが、ギャラリーにはそれを含めないのがポイントです。

HTML

こんな感じでHTMLを作成

<!-- CSS -->
<link rel="stylesheet" href="magnific-popup.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- JS -->
<script defer src="jquery.magnific-popup.min.js"></script>
<script defer src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="gallery-container slider">
	<div class="slide"><a href="img01.jpg"><img src="img01.jpg"></a></div>
	<div class="slide"><a href="img02.jpg"><img src="img02.jpg"></a></div>
	<div class="slide"><a href="img03.jpg"><img src="img03.jpg"></a></div>
	<div class="slide"><a href="img04.jpg"><img src="img04.jpg"></a></div>
</div>

JS

slickは普通に実行。

callbacksでスライダーの一時停止・再開する処理も先ほどのサンプルと同様。

11行目で、slickによって複製された.slick-clonedの画像は除外し、ギャラリー定義しています。

また36行目から、slickのcenterMode (両側のスライドが見える状態) を使用している場合は、両脇の.slick-cloned要素がクリックできてしまい、モーダル表示できないので、.slick-clonedではない方のスライドをクリックしたことにする処理です。 centerModeを使わない場合は不要です。

$(function(){
	//slick (オプションはお好みで)
	$(".slider").slick({
		autoplay: true,
		centerMode: true,
		variableWidth: true
	});

	//Magnific Popup ギャラリー
	$(".gallery-container").magnificPopup({
		delegate: ".slide:not(.slick-cloned) a",
		type: "image",
		gallery: {
			enabled:true
		},
		callbacks: {
			elementParse: function(item) { //モーダルを開く時
				//スライダー一時停止処理

				//親要素の「.slider」を取得
				let slider = item.el.closest(".slider");
				//親要素の「.slider」が存在し、クラス「paused」を持っていなければ
				if(slider.length && !slider.hasClass("paused")){
					//親要素の「.slider」を一時停止、クラス「paused」を付与
					slider.slick("slickPause").addClass("paused");
				}
			},
			close: function(){ //モーダルを閉じるとき
				//「.slider.paused」を再開し、クラス「paused」を削除
				$(".slider.paused").slick("slickPlay").removeClass("paused");
			}
		}
	});
});

//slickのcenterModeで .slick-cloned がクリックされたときの処理 (任意)
$(".slider").on("init", function(){
	$(".gallery-container .slick-cloned a").on("click", function(){
		//クリックされたスライドのhrefを取得
		let href = $(this).attr("href");
		//slick-clonedではない、同じhrefのaを取得
		let target = $(".slick_mfp_gallery .slide:not(.slick-cloned) a[href='"+href+"']");
		//それをクリック
		target.click();
		return false;
	});
});

コメント

「できました!」などの報告もお待ちしております。

内容を確認の上、個人情報などは省いて掲載させていただきます。

お名前・メールアドレスも入力する

メールで返信がほしい場合に入力してください。

頂いた個人情報は開示しません。返信のためだけに利用いたします。

直接送信されます。確認の上、「送信」してください。

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る


または以下のボタンからなにか買って応援 (PR)

Amazon

楽天市場

Yahoo!ショッピング

Amazonのアソシエイトとして「けん」は適格販売により収入を得ています。

シェア

Twitterでシェア Facebookでシェア LINEでシェア はてなブックマークでシェア

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る