Lightbox的なモーダルウインドウ作ってみた

みなさん、お疲れ様です。
今回は画像を表示するモーダルウィンドウを作りました。Lightboxなどのプラグインでおなじみの機能で、使い勝手の良いものも多いですが、いろいろ見てて自分でも作ってみたくなったのでやってみました。

プラグインには及びませんが、そこそこ使えると思いますので、使ってやってもいいよって方はぜひ使ってください。

まずはデモページをどうぞ。

以下コードです。下に使い方も載せておきます。

HTML

	<section>

	<ul class="thumbnail">
	<li><a href="images/ichigo.gif"><img src="images/ichigo_min.gif" alt="いちご"></a></li>
	<li><a href="images/kiwi.gif"><img src="images/kiwi_min.gif" alt="キウイ"></a></li>
	<li><a href="images/mikan.gif"><img src="images/mikan_min.gif" alt="みかん"></a></li>
	<li><a href="images/ringo.gif"><img src="images/ringo_min.gif" alt="りんご"></a></li>
	</ul>


	<!-- モーダルウィンドウ -->
	<div class="modal">
	<div class="modal-wrapper">
	<ul class="image">
	</ul>
	<div class="modal-footer">
	<ul class="arrow">
	<li class="prev">＜</li>
	<li class="next">＞</li>
	</ul>
	<div class="hide"><i class="fa fa-times"></i></div>
	</div>
	</div>
	</div>


	</section>

view raw modalHTML hosted with

by GitHub

CSS

	<style>
	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	ul,li{
	list-style: none;
	}

	.thumbnail{
	margin-top: 100px;
	}

	.photo{
	width: 800px;
	height: 200px;
	overflow: hidden;
	}

	.thumbnail li{
	display: inline-block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	}



	/* モーダル */
	.modal{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	z-index: 100;
	}

	.modal-wrapper{
	position: relative;
	}

	.image li{
	display: none;
	}

	.modal-footer{
	position: relative;
	height: 50px;
	}

	.arrow{
	position: absolute;
	top: -300px;
	left: 0;
	overflow: hidden;
	}

	.arrow li{
	padding: 10px 20px;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	cursor: pointer;
	}

	.next{float: right;}
	.prev{float: left;}

	.hide{
	position: absolute;
	top: 5px;
	right: 15px;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	}

	</style>

view raw modalCSS hosted with

by GitHub

jQuery

	var modalIn = 1000;//モーダルを表示するときのフェードの時間
	var modalOut = 1000;//モーダルが消えるときのフェードの時間
	var chengeSpeed = 500;//画像を変更する時間
	var arrowStyle = true;//falseにするとボタンの位置をCSSで変更できるようになります。

	//imgタグを配列で取得
	var imglist = $('.thumbnail li a').map(function(){
	return $(this).attr('href');
	}).get();

	var liNum = $('.thumbnail li').length;//リストの数を取得

	for(i=0;i<liNum;i++){//モーダル内に画像のリストを作る
	$('ul.image').append('<li><img src="' + imglist[i] + '"></li>');
	}

	$('.thumbnail li a').on('click',function(){//サムネイル画像をクリックしたとき
	var currentImg = $(this).attr('href');//画像のsrc属性を取得
	$('.modal').fadeIn(modalIn);//モーダルウィンドウを表示
	$('.image li').hide();//一度すべての画像を隠す
	$('.image img[src="' + currentImg + '"]').parent('li').show();//クリックした画像を表示
	setTimeout(function(){
	modalWidth();
	},100);
	return false;
	});

	$('.hide').on('click',function(){//×ボタンをクリック
	$('.modal').fadeOut(modalOut);//モーダルウィンドウを非表示
	$('.image li').hide();//画像を非表示
	});

	$('.next').on('click',function(){//右矢印をクリック
	var lastModal = $('.image').find(':last');//モーダル内の画像のリストの最後を取得
	if($(lastModal).is(':visible')){//もし表示している画像がリストの最後なら
	$('.image li:visible').fadeOut(chengeSpeed);//表示している画像を非表示にして
	$('.image li:first').delay((chengeSpeed + 1)).fadeIn(chengeSpeed);//リストの最初の画像を表示
	} else{//リストの最後でなければ
	$('.image li:visible').fadeOut(chengeSpeed);//今表示している画像を非表示
	$('.image li:visible').next('li').delay((chengeSpeed+1)).fadeIn(chengeSpeed);//次の画像を表示
	}
	setTimeout(function(){//表示が終わってから実行
	modalWidth();
	},(chengeSpeed+10));
	});

	$('.prev').on('click',function(){//左の矢印をクリックしたとき
	var firstModal = $('.image').find(':first');
	if($(firstModal).is(':visible')){
	$('.image li:visible').fadeOut(chengeSpeed);
	$('.image li:last').delay((chengeSpeed+1)).fadeIn(chengeSpeed);
	} else{
	$('.image li:visible').fadeOut(chengeSpeed);
	$('.image li:visible').prev('li').delay((chengeSpeed+1)).fadeIn(chengeSpeed);
	}
	setTimeout(function(){
	modalWidth();
	},(chengeSpeed+10));
	});

	function modalWidth(){
	var imgWidth = $('.image li:visible').children('img').width();//表示している画像の幅を取得
	var imgHeight = $('.image li:visible').children('img').height();//表示している画像の高さを取得
	$('.modal-wrapper').css({
	'width':imgWidth,//モーダルの箱の幅を画像の幅と同じにする
	'left':'calc((100% - ' + imgWidth + 'px) / 2)',//モーダルの箱の位置を中央にする
	'top':'calc((100% - ' + imgHeight + 'px) / 2)'
	});
	if(arrowStyle == true){
	$('.arrow').css({//矢印の位置を決める
	'display':'none',
	'width':imgWidth,
	'top':'calc(-'+imgHeight+'px / 2)'
	});
	$('.image img,.arrow').hover(function(){//ホバーしたときのみ矢印を表示
	$('.arrow').show();
	},function(){
	$('.arrow').hide();
	});
	}else{
	}
	}

view raw modaljQuery hosted with

by GitHub

変更するのはthumbnailの画像のパスとaタグのhref属性（これが表示する画像になります）、CSSです。

基本的にjQueryは触らずに使えるようにしていますが、カスタマイズしたい場合はご自由にどうぞ。

初めのところの変数でいろいろ変えられるようになってます。

modalIn：モーダルウィンドウを開く時間

modalOut：モーダルウィンドウを閉じる時間

chengeSpeed：画像変更の時間

arrowStyle：falseにすると矢印ボタンの位置をCSSで変更できるようになります。

今回、使ったjQueryのいろいろ

setTimeout：時間差で処理を実行する。これのおかげでボタンの位置を調整できた。

.map：一言でいうと配列が作れる。慣れると便利だと思う。

.length：配列や要素の数を取得できる。個数が変化する要素には必須だと思う。

:visible：今見えてる要素を取得。今回大活躍。

詳しくは調べてみてください。いろいろ使い方があっておもしろいですよ。

それでは、長くなってしまいましたが、今回はこのへんで。