IT tech Coding/jquery
제이쿼리 Jquery 이미지 클릭하면 화면에 크게 보이기 만들어 봐요~
Coding Life
2022. 12. 5. 09:46
웹사이트를 만들다보면 작은 구석의 이미지를 클릭하면 화면에 나름 꽉차게 보이는 화면을 구성하고 싶을때가 있지요.
사용자에게 편의를 제공하는게 좋은 프로그램이니까요~
그럴때 이미지를 클릭하면 화면에 크게 나오게 하는 소스를 정리해 봤어요.
일단 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>
이렇게 하고 실행하면 실제 구현한 화면을 보면...
이미지를 클릭하면...
화면에 꽉차게 이렇게 나옵니다.
동작은 잘 되는 코드이니 필요하신 분들은 많이 활용하시길 바랍니다.
감사합니다.
반응형