728x90
image.jsp
$img = $('<img src="이미지 주소" class="클래스명" alt="이미지 설명"/>');
$img.on('click',function(){
//window.open(this.src);
var self = this;
$.ajax({
url:"../html/popupImage.html",
}).done(function(result){
result = result.replace("\"src\"",self.src)
result = result.replace("<p></p>", "<p>"+self.alt+"</p>")
var wnd = window.open("");
wnd.document.write(result);
});
});var self = this;
self 대신 this를 사용하여 현재 객체를 참조
popupImage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Popup</title>
<style>
body {margin:25px;}
div.polaroid {
width: 100%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="polaroid">
<img src="src" style="width:100%">
<div class="container">
<p></p>
</div>
</div>
</body>
</html>CSS Image Gallery
CSS Image Gallery CSS can be used to create an image gallery. Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here Image Gallery The following image gallery is creat
www.w3schools.com
'js' 카테고리의 다른 글
| [javaScript] 페이지 내에 원하는 위치로 스크롤 이동하기 (1) | 2021.05.12 |
|---|---|
| [jQuery] 자식 및 하위 태그 모두에서 찾는 .find() (1) | 2021.05.11 |
| [javaScript] 파일 확장자 제거 정규표현식 .replace() (0) | 2021.04.27 |
| [jQuery] 태그 class명 변경하기 (0) | 2021.04.23 |
| [jQuery] select Box 강제 change (trigger) (0) | 2021.04.08 |