jQueryを使ってクリックして画像拡大をしようと考えた。ただ、lightboxなどのライブラリを使わないで勉強がてら自分でやる場合のやり方を考えていく

準備

処理に何が必要か考える

  • clickで処理を走らせる
  • クリックした画像のsrcを取得する
  • 取得したsrcを使って拡大した画像を表示させる
  • 画像を見やすくするために、背景は全画面をオーバーライドさせる

考えたやり方

script


$(document).ready(function(){
	$('.imgbox').click(function(){
		var src = $(this).attr('src');
		$('body').prepend('<div id="img_rapper" onclick="closeimg()"></div ><div id="imgbox" onclick="closeimg()"><img src="'+src+'" /></div>	');
	});
	
});

function closeimg() {	
	$(function(){
		$('#img_rapper').remove();
		$('#imgbox').remove();		
	});
};	

CSS


#img_rapper {
width: 100%;
height: 100%;
position: fixed;
z-index: 2;
text-align: center;
background: #000;
top: 0;
opacity: 0.6; 
}


#imgbox {
width: 100%;
height: 100%;
position: fixed;
z-index: 99;
text-align: center; 
}

#imgbox img {
height: 80%;
display: inline-block;
position: relative;
top: 0; 
}

@media screen and (max-width: 735px) {
	#imgbox img {
        width: 100%;
        height: auto;
        top: 20%; } 
    }
    	

  • クラス .imgbox の付いた画像がクリックされたら処理を走らせる
  • $(this).attr('src') でクリックした画像のsrcを変数に入れる
  • bodyタグの先頭にオーバーライド用の img_rapper と画像表示用 imgbox divを追加。imgbox にはimgタグを挿入して取得したsrcで画像を指定しておく。また、クリックして閉じれるよう両方のdiv には onclick="closeimg()" を指定しておく
  • closeimg()が走ると、追加された二つのdivを削除するようにした
  • img_rapperの背景を透過にしたいので、img_rapper と imgboxはz-indexを指定して imgboxが上に来るようにした。img_rapper内に画像を指定すると、画像は子要素になって画像まで透過されてしまうのを防ぐため

【DEMO】

課題

とりあえず拡大はできたけど、以下の問題と課題

  • キャプションをつけたい
  • 同じグループの写真を拡大した状態でスワイプなどで見れるようにする
  • 画像のサイズを取得して、横長の画像はwidth%指定、 縦長の画像はheight%指定にする