제이쿼리 Jquery 이미지 클릭하면 화면에 크게 보이기 만들어 봐요~

웹사이트를 만들다보면 작은 구석의 이미지를 클릭하면 화면에 나름 꽉차게 보이는 화면을 구성하고 싶을때가 있지요.

사용자에게 편의를 제공하는게 좋은 프로그램이니까요~

그럴때 이미지를 클릭하면 화면에 크게 나오게 하는 소스를 정리해 봤어요.

일단 Jquery를 불러와야 하니까 CDN 사이트에서 가져와 보면

 

위의 3.x  minified 가져오면 소스는 아래와 같지요.

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

그리고 스타일도 정해줘야 합니다.

아래와 같이 하면 됩니다. 높이 기준으로 100%로 설정되어 있지요.

<style>
.bigPictureWrapper {
	position: absolute;
	display: none;
	justify-content: center;
	align-items: center;
	top:0%;
	width:100%;
	height:100%;
	background-color: gray; 
	z-index: 100;
	background:rgba(255,255,255,0.5);
}
.bigPicture {
	position: absolute;
	display:flex;
	justify-content: center;
	align-items: center;
}

.bigPicture img {
	height:100%; /*새로기준으로 꽉차게 보이기 */
}
</style>

 

이제 HTML에 DIV 요소를 넣고 띄워주는 구문이 필요합니다.

실제 HTML (처음에 띄워주는 것으로 코드를 넣어봤어요)

   
<div class='bigPictureWrapper'>
	<div class='bigPicture'>
	</div>	   
</div>

 

마지막으로 script 구문으로 제이쿼리의 위력을 선보여야 하겠지요?

<script type="text/javascript">

	$(document).ready(function (e){		
		$(document).on("click","img",function(){
			var path = $(this).attr('src')
			showImage(path);
		});//end click event
		
		function showImage(fileCallPath){
		    
		    $(".bigPictureWrapper").css("display","flex").show();
		    
		    $(".bigPicture")
		    .html("<img src='"+fileCallPath+"' >")
		    .animate({width:'100%', height: '100%'}, 1000);
		    
		  }//end fileCallPath
		  
		$(".bigPictureWrapper").on("click", function(e){
		    $(".bigPicture").animate({width:'0%', height: '0%'}, 1000);
		    setTimeout(function(){
		      $('.bigPictureWrapper').hide();
		    }, 1000);
		  });//end bigWrapperClick event
	});
    
</script>

이렇게 하고 실행하면 실제 구현한 화면을 보면...

이미지를 클릭하면...

화면에 꽉차게 이렇게 나옵니다.

 

동작은 잘 되는 코드이니 필요하신 분들은 많이  활용하시길 바랍니다.

감사합니다.