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 |