그러냐

이미지 사이즈(width, height) 가져와서 새창 띄우기 본문

javascript

이미지 사이즈(width, height) 가져와서 새창 띄우기

관절분리 2016. 1. 27. 18:18
반응형
출처 good-bye sadness, hello happiness | 샤크바링
원문 http://blog.naver.com/lissyu/10010798603

이전에 올라온 많은 함수들을 봤는데요
대부분 작은 이미지를 클릭하면 큰이미지가 뜨게 하는 기능으로 사용하는거 같습니다.
대부분의 함수중에서 이미지가 아직 로드되지 않은채로 이미지의 크기를 가져오는 코드들이 있는데요
이런경우 첫번째 이미지가 열릴때는 크기가 0, 0 으로 이미지가 안나오는 경우가 생깁니다.
그래서 보안한 함수입니다.

실행되는 브라우저 버전은 잘몰르겠네요.. 아신는분 댓글 남겨주시면 감사하겠습니다.

이미지 크기를 가져오기위해 사용한 방법은
먼저 새창을 15 X 15 사이즈로 열고 출력할 해당이미지의 readyState 가 complete 될때까지
기다린후 새창을 다시 조정하는 방법을 사용했습니다.

readyState 는 해당 출력될 Object 의 상태가 읽어오는 중인지 모두 읽었는지 취소되었는지 등을 알수있는
프로퍼티입니다.

[사용방법]
먼저 아래 소스코드를 <head>~<head> 사이에 넣어주시구요. 사실 암대나 넣어두 상관없습니다.
그리고 img태그의 경우

<img src="abcdefg.gif" onclick="OpenImage(this.src)"> 라고 해주시면
abcdefg.gif 파일이 새창으로 열립니다.

일반 링크의 경우

<a href="#" onclick="OpenImage('새창으로 띄울 이미지의 주소')">크게보기</a>

다음 처럼 사용하시면 됩니다.

[예제]
http://goweb.netcci.org/bbs/zboard.php?id=photo

[소스코드]
========================================================================================
<script language='javascript' type='text/javascript'>
<!--
/***********************************
/ 이미지 사이즈에 맞게 새창띄우기
/***********************************/
function OpenImage(s){
        //
        // 변수 정의
        //
        srcImg = new Image();
        clientWidth = screen.width;
        clientHeight = screen.height;
        srcImg.src = s;
  //
  // 열려는 파일을 이름
  //
        var srcFileName = srcImg.src.substr(srcImg.src.lastIndexOf("/")+1, srcImg.src.length);
        //
        // 새창 띄우고 이미지 삽입
        //
        win = window.open("","","width=15,height=15,scrollbars=no,resizable=no,left="+(clientWidth/2-15)+",top="+(clientHeight/2-15)+"");
        win.document.writeln("<html>");
        win.document.writeln("<head>");
        win.document.writeln("<title>"+document.title+" ["+srcFileName+"]</title>");
        win.document.writeln("</head>");
        win.document.writeln("<body style='margin:0px;' bgcolor='#333333'>");
        win.document.writeln("<table border='0' cellpadding='0' cellspacing='0' style='cursor:hand' onclick='self.close()'>");
        win.document.writeln(" <tr>");
        win.document.writeln("  <td align='center'><img src="+s+" name='winImg' style='cursor:hand' onclick='self.close()' alt='클릭하면 사라집니다'></td>");
        win.document.writeln(" </tr>");
        win.document.writeln("</table>");
        win.document.writeln("</body>");
        win.document.writeln("</html>");

        srcImg = win.document.winImg;
        //
        // 이미지가 모두 로딩될때까지 기다림
        //
        while(true)
                if(srcImg.readyState == "complete")
                        break;
       
        //
        // 새창의 크기 설정
        //
        var winWidth = srcImg.width+10;
        var winHeight = srcImg.height+29;
        //
        // 새창이 띄워질 위치 설정
        //
        var left = (clientWidth/2)-(srcImg.width/2);
        var top = (clientHeight/2)-(srcImg.height/2);
        //
        // 이미지의 크기 overflow 확인후 새창의 크기와 위치 재설정
        //
        if(clientWidth <= srcImg.width){
                winWidth = clientWidth;
                left = 0;
                win.document.body.scroll = "auto";
        }
        if(clientHeight <= srcImg.height){
                winHeight = clientHeight-30;
                top = 0;
                win.document.body.scroll = "auto";
        }
        //
        // 이미지로딩이 끝났음으로 이미지의 크기를 사용할수 있다.
        // 해당 이미지의 사이즈에 맞게 윈도우를 재설정한다.
        win.moveTo(left, top);
        win.resizeTo(winWidth, winHeight);
}
//-->
</script>

[출처] [본문스크랩] 이미지 사이즈(width, height) 가져와서 새창 띄우기|작성자 관절분리

반응형
저작자표시

'javascript' 카테고리의 다른 글

Full-screen window open  (0) 2016.01.27
자바스크립트 기능반복하기 (타이머)  (0) 2016.01.27
다른 도메인 iframe 높이 조절하기  (0) 2016.01.27
iframe 높이 자동 조절하기  (0) 2016.01.27
selectbox index 값 구하기 설정하기  (0) 2016.01.27
'javascript' Related Articles more