갤러리 프로젝트나 작업을 할 때 종종 원본 이미지 크기가 커서 작게 화면에 보여주고 클릭하면 새창이나 팝업으로 원본의 크기 그대로 이미지를 보여주는 작업이 종종 있습니다.
이럴때 하기의 자바스크립트를 이용하면 화면 파일일(.html 등)을 만들지 않고도 해결이 가능 합니다.
function fnImgOpen(gubun){
var img = "";
if (gubun == "large") { // 대분류
$('#largeCategoryImg').attr("src");
}
else (gubun == "medium") { // 중분류
$('#mediumCategoryImg').attr("src");
}
var imgTmp = new Image();
imgTmp.src = img;
var imgWin = window.open("",gubun,"width="+imgTmp.width+",height="+imgTmp.height+",status=no,toolbar=no,scrollbars=no,resizable=no");
imgWin.document.write("<html><title>미리보기</title>"
+"<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>"
+"<a href='javascript:self.close()'><img src='"+img+"' width="+imgTmp.width+" height="+imgTmp.height+" border=0></a>"
+"</body></html>");
}
<a href="#" onclick="return fnImgOpen('large');"><img id="largeCategoryImg" src="" alt="" /></a>
'IT > javascript' 카테고리의 다른 글
| 날짜 포맷 자동 만들기 (0) | 2018.06.20 |
|---|---|
| 자바스크립트 try catch (0) | 2018.02.23 |
| 자바스크립트 반올림, 올림, 버림 (0) | 2018.02.13 |
| txt(json 방식) 파일을 읽어서 ajax로 db 저장 (0) | 2015.12.23 |
| ajax의 여러가지 사용 법 (C#) (0) | 2015.12.23 |