이미지 클릭하면 아래 그림처럼 팝업창으로 이미지를 보여주고자 한다.
물론 기본적인 html, javascirpt, jquery 만으로도 이미지 팝업을 구현할 수 있으나, magnificPopup 라이브러리를 통해 간단하게 구현할 수 있다.
https://dimsemenov.com/plugins/magnific-popup/documentation.html
Magnific Popup Documentation
The complete guide on how to use Magnific Popup - the open source responsive lightbox plugin.
dimsemenov.com
다양한 옵션이 있으니 자세한 건 공식 documentation을 참고하면 될 듯
일단 나는 동적으로 생성된 img 태그를 클릭해서 이미지 팝업을 띄우고 싶었다.
사용 언어,기술: html, javascript, jquery, magnificPopup 라이브러리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
// magnific-popup.css 넣기
<link rel="stylesheet" href="<c:url value='/css/magnific-popup.css'/>">
</style>
</head>
<body>
<table id="table"></table>
//반드시 jquery 뒤에 magnific-popup.js를 넣어주어야 한다.
<script src="<c:url value='/js/jquery-3.5.1.min.js'/>" charset="utf-8"></script>
<script src="<c:url value='/js/jquery.magnific-popup.min.js'/>" charset="utf-8"></script>
<script src="<c:url value='/js/common.js'/>" charset="utf-8"></script>
<script>
$.ajax({
url: "image/",
}).done(function(data){
var html = "<tr><td>" + data.file_nm + "</td><td>"
+ data.file_size + "</td>"
+ "<td><a href='" + data.url + "' class='tlink'>"
+ "<img id='thumbnail1' src='" + data.url2 + "' class='thumbnail' />"
+ "</a></td></tr>";
$("#table").append(html);
});
</script>
</body>
</html>css와 js는 https://github.com/dimsemenov/Magnific-Popup/tree/master/dist에서 다운받아 적당한 폴더에 넣어준다.
필요한 소스만 복붙해봤다.
dimsemenov/Magnific-Popup
Light and responsive lightbox script with focus on performance. - dimsemenov/Magnific-Popup
github.com
일단 ajax에서 데이터를 받아와 img태그에 src와 a태그 href에 url를 넣어준다고 가정하자.
아래는 이미지 클릭시 이미지 팝업이 구현된 소스 common.js이다.
//썸네일 클릭시 이미지 팝업
$(document).on("click", ".tlink", function(e){
e.preventDefault(); //a링크가 동작하지 않게 하기 위해서 반드시 써야한다.
$.magnificPopup.open({
items: {
src: $(this).attr("href"),
type: 'image'
}, //src와 type 필수로 작성해주어야 한다.
delegate: "a",
closeOnContentClick: true, //팝업으로 뜬 이미지를 클릭하면 닫기 동작 true
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});일단 동적인 태그를 클릭할 때 이벤트를 발생시켜야 하므로 $(document).on("click", ".tlink", function(e){ .. 와 같이 써준다. 그리고 a링크 기본 이벤트를 막기 위해서 e.preventDefault(); 를 쓴다.
일반적으로 magnificPopup은 $("something").magnificPopup({... 이런식으로 작성된다. 이땐 items: { src: ... 이런식으로 작성할 필요가 없다. (대부분 예제가 그렇다.)
하지만 $.magnificPopup.open({ ... 이런식으로 작성할 시엔 items: { src: ..., type: ... } 와 같이 작성해주어야 한다.
이렇게 간단하게 팝업 구현을 할 수 있다니 참 편하다~~ㅎ
'공부기록 > 여러가지' 카테고리의 다른 글
| Windows 10 VPN 설정 멈춤(Window Setting Freezes) (0) | 2022.09.08 |
|---|---|
| MariaDB 시작시 시스템 오류 1067이(가) 생겼습니다. (0) | 2022.07.22 |
| tomcat manager 404에러 (0) | 2021.04.13 |
| apk 앱이 설치되지 않았습니다 2가지 해결방법 안 먹힐 때.. (0) | 2021.04.07 |
| [에러] 찾고 있는 리소스가 제거되었거나 이름이 변경되었거나 일시적으로 사용할 수 없습니다. (0) | 2021.04.07 |
