準備

処理に何が必要か考える

• 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%指定にする