2019.01.28 Mon

画像をクリックして動画をスライダーで複数再生できるようにしよう！

もうすぐ2月になりますが、新年あけましておめでとうございます。

自分の今年の目標は間食を控えることと、6分割腹筋を手に入れることです！

最近アジアカップが開幕しました！厳しい戦いが非常に多いですが、ぜひ優勝してほしいと思います！
若手の活躍も観ていて凄い楽しいです！

今回の記事では前回紹介したMagnific Popupをつかって画像をクリックすると、動画を複数表示できるようにしていきたいと思います。
よろしくお願い致します。

Magnific Popupを使って動画を表示する

今回はMagnific Popupの導入に関しては省略させていただきます。

先程も紹介しましたが詳しい使い方に関してはこちらを見て頂ければと思います！

例によって今回も自分が作成したページで実装していきたいと思います。

前回はこのように

クリックすると画像が表示するようにしていました！

今回は動画表示です！画像の2番目をクリックした際に動画を表示させるようにしたいと思います！

<li class="contents-img">
	<a class="popup-iframe" href="//www.youtube.com/watch?v=OMyAZh_BT4s">
		<img src="img/img_sample01.jpg" alt="">
	</a>
	<a class="popup-iframe" href="//www.youtube.com/watch?v=OMyAZh_BT4s" style="display:none;">
		<img src="img/img_sample01.jpg" alt="">
	</a>
</li>

scriptにはこちらを記述します！

$(function(){
	$('.popup-iframe').magnificPopup({
		type: 'iframe',
		mainClass: 'mfp-fade',
		removalDelay: 200,
		preloader: false,
		gallery: {//ギャラリー表示にする
			enabled: true
		}
	});
});

今回のポイントは本来ならimgタグで画像が2つ並んでいるはずなのですが、1つにdiplay:none;をかけていることで、
一枚に見せているんですね！

それでは早速見てみましょう！