이미지 클릭시 팝업으로 원본을 보여주는 스크립트입니다.

IE6,7의 경우 스크롤바가 있고 없고에 따라 창크기가 달라져 이미지 크기에 딱맞게 띄울 경우 원치 않는 스크롤이 생길 수 있습니다.

그래서 팝업 띄울때 스크롤바 자리는 일단 확보해줍니다. (scrollbars=yes)

파폭이나 크롬에서는 이렇게 해줘도 창크기를 넘지 않는 이상은 스크롤바가 보이지 않네요.

스크롤바가 생겨도 내용이 표시되는 자리가 좁아지지는 않죠. 헌데 IE는 좀 달라서 내용 보여질 자리가 좁아져 버리기때문에 미리 확보합니다.

 

보통 크기의 이미지를 띄울때 IE에서 스크롤바 자리가 있다보니 버젼 체크해서 그 크기만큼 가로를 좀 늘려줍니다.

최대 크기(screen 크기 기준)를 초과할 경우에는 어쩔수 없이 이미지보다 작은 창을 띄우기 때문에 그로 인한 스크롤바 자리를 확보해줍니다.

 

common.js 
var imgCommonPreview = new Image();
function showPicture(imgSrc) {
     imgCommonPreview.src = imgSrc;
     setTimeout("createPreviewWin(imgCommonPreview)", 100);
}
function createPreviewWin(imgCommonPreview) {
     if (! imgCommonPreview.complete) {
          setTimeout("createPreviewWin(imgCommonPreview)", 100);
          return;
     }
     var scrollsize = 17;
     var swidth = screen.width - 10;
     var sheight = screen.height - 90;
     var wsize = imgCommonPreview.width
     var hsize = imgCommonPreview.height;
 
     if(wsize < 50) wsize = 50;     // 가로 최소 크기
     if(hsize < 50) hsize = 50;     // 세로 최소 크기
     if(wsize > swidth) wsize = swidth;     // 가로 최대 크기
     if(hsize > sheight) hsize = sheight;     // 세로 최대 크기
     //세로가 최대크기를 초과한경우 세로스크롤바 자리 확보
     if((wsize < swidth-scrollsize) && hsize >= sheight) wsize += scrollsize;
     //가로가 최대크기를 초과한경우 가로스크롤바 자리 확보
     if((hsize < sheight-scrollsize) && wsize >= swidth) hsize += scrollsize;
     // IE 6,7 전용 : 가로세로 크기가 보통일때 세로 스크롤바 자리 확보
     if((wsize < swidth-scrollsize) && hsize < sheight 
          && (navigator.userAgent.indexOf("MSIE 6.0") > -1
          || navigator.userAgent.indexOf("MSIE 7.0") > -1))wsize += scrollsize; 
 
     imageWin = window.open("", "winPreviewImg", "top=0,left=0,width=" + wsize
                         + ",height=" + hsize +",scrollbars=yes,resizable=yes,status=no");
     imageWin.document.write("<html><title>Preview</title><body style='margin:0;cursor:pointer;' title='Close' onclick='window.close()'>");
     imageWin.document.write("<img src='" + imgCommonPreview.src + "'>");
     imageWin.document.write("</body><html>");
}
sample.html 
<html>
<head>
     <script type="text/javascript" src="common.js"></script>
</head>
<body>
<a href="javascript:showPicture('mini.gif')">작은이미지(10*10)</a><br>
<a href="javascript:showPicture('medium.gif')">보통이미지(300*600)</a><br>
<a href="javascript:showPicture('hlong.jpg')">세로스크롤(500*2000)</a><br>
<a href="javascript:showPicture('wlong.jpg')">가로스크롤(2000*500)</a><br>
</body>
</html>
이 게시물을..