웹마스터 팁
이미지 사이즈에 맞게 새창띄우기 [오류보완] 정확하게 안열리는 오류
2004.08.18 15:01
이전에 올라온 많은 함수들을 봤는데요
대부분 작은 이미지를 클릭하면 큰이미지가 뜨게 하는 기능으로 사용하는거 같습니다.
대부분의 함수중에서 이미지가 아직 로드되지 않은채로 이미지의 크기를 가져오는 코드들이 있는데요
이런경우 첫번째 이미지가 열릴때는 크기가 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>
대부분 작은 이미지를 클릭하면 큰이미지가 뜨게 하는 기능으로 사용하는거 같습니다.
대부분의 함수중에서 이미지가 아직 로드되지 않은채로 이미지의 크기를 가져오는 코드들이 있는데요
이런경우 첫번째 이미지가 열릴때는 크기가 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>
댓글 11
-
beMax
2004.08.18 15:13
-
킬러
2004.08.18 17:03
그림파일명이 한글이여도 되나요? 제가 다른 소스를 써본결과 파일명이 한글일 경우 50% 이상 오류가 나더라구요 -
beMax
2004.08.18 17:41
UTF-8로 보내지 않음으로 하면 보인다고들 하는데..
저는 보였다 안보였다 그럽니다.-_-;
왜그런지..;; -
오마이갓
2004.08.18 19:50
더 간단한 방법이 있을 것 같으네요...
아래와 같이 해보세요...
<script>
function changesize()
{
window.resizeTo(thisimage.width+10, thisimage.height+29);
}
</script>
....
<img id=thisimage onload=javascript:changesize() src=photo.jpg> -
킬러
2004.08.18 20:03
저도 beMax 님과 동일 보였다 안보였다.. 그부분은 UTF-8 과 상관 없는듯 합니다.. 아직까지 해결방법이 없는듯.. -
beMax
2004.08.18 21:48
오마이갓// 기왕이면 함수로 좀 만들어주시지..ㅠㅠ
가따가 좀쓰게요..;; -
새천년고속관광
2004.08.19 11:53
전 항상 보이던데요.. 파일명이 한글이라도.. UTF-8로 설정..
그래도 회원들중에 귀찮아서 셋팅 안하는 사람이 있어서
파일명이 한글일때 숫자(PHP식의 날짜)로 파일명을 변경해서 저장되게 하는.. -
u2em
2004.08.19 12:52
별로 상관없는 얘긴데 인터넷 익스플로더 개발자들의 무지(無知)함은 URL 인코딩 방식에서 들어난지 오래죠..
모질라는 그런 이상한 설정을 안 해줘도 URL을 잘 처리합니다...
물론 인터넷 익스플로더처럼 EUC-KR로 인코딩해서 보낸다던가 하지 않고 UTF-8로 보내면서요... -
오마이갓
2004.08.19 19:23
움...저의 이야기는...
구태여 이미지가 로드가 다 되었는지 체크할 필요가 없다는 이야기입니다...
윈도우 리사이즈하는 함수를 img 태그의 onload 이벤트에 넣어주면 신경쓸 필요가 없다는...
그리고, UTF-8로 보냄 옵션은 그림파일명이 한글일 경우에 관련된 것이겠죠... -
beMax
2004.08.21 00:02
오마이갓//
근데 좀 불편한감이...;;
새창을 띄워서 그안에 이미지를 출력할텐데요..그럼
win.document.write 메서드로
win.document.write("<img src='a.gif' onload='ResizeWindow(this.src)'>");
이렇게 해야할테구요..
스크립트를 넣는다면
win.document.write("<script> function(obj){self.resizeTo(obj.width+10, obj.height+29);}");
뭐이렇게 넣어야하구..;;
그담 새창의 위치도 조정해줘야 하니까..음..;;
그리고 저함수는 이미지가 모니터를 넘어가면 모니터에 딱맞게 조정하고 스크롤을 만들거든요..
이런저런 코드를 win.document.write() 로 쓰기엔 좀 버거운감이..^^;;
onload또한 사용편의를 위한 이벤트인것같구 그 이벤트가 등록되면 당연히 readyState와 같은 뭐 정확히
뭐로 load됬는지 비교되는지는 몰르지만.. 아무튼 readyState와 같은 값을 토대로 확인할것같다는 생각이..
그렇담 onload 나 readyState확인이나...별차이가 없어보이네요.. -
김대성
2004.09.16 05:56
테두리 없애는 방법좀 여쭐수 있을까요?
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| [초보] 확장자 체크하는 매우 간단한 소스; [4] | 에지 | 2003.09.29 |
인터넷 사이트 , MS 오피스로 관리하기 3 공시사항 나타내기
[5]
 | 한꼬마 | 2003.09.24 |
| Whois를 이용해서 접속자가 사용하는 ISP출력(한국통신,하나로,두루넷 등등) [6] | 김재경 | 2003.09.23 |
| 달력 만들기 [10] | TheMics | 2003.09.23 |
| php+mysql>>공지사항|일기장 프로그램 1장:DB구조,schema 파일로 테이블생성하기! [2] | 시루바 | 2003.09.23 |
|
인터넷 사이트, MS 오피스로 관리하기 2 공지사항
[4]
| 한꼬마 | 2003.09.23 |
|
인터넷 사이트 , MS 오피스로 관리하기
[3]
| 한꼬마 | 2003.09.22 |
| 임시적으로 php.ini 환경변수들 대처하기 [2] | impre | 2003.09.20 |
| 동적으로 Extensions(library) 로딩하기 | impre | 2003.09.20 |
| include 할시에 주의사항..(경로설정관련) [10] | 피너츠 | 2003.09.14 |
| 지정한만큼 암호화/해독 하기 [24] | 뒹굴리스트 | 2003.09.10 |
| 모든파일을 리스트로 만들기; [10] | 플로렐라 | 2003.09.10 |
| 군대간 친구 남은날짜 구하기 2(복무기간 단축에 따른 수정) [8] | 신민경 | 2003.09.02 |
| 자료실에 쓸만한 자료용량 환산 [7] | 한승진 | 2003.09.01 |
| php 랜덤 이미지 디렉토리 검색으로 편하게.. [3] | 꺼노 | 2003.08.28 |
| 웹디자이너와 프로그래머가 사이 좋게 코딩하는 방법 [50] | 마이템플릿 | 2003.08.13 |
| 개판 오분전 정규식(1) | 미친개 | 2003.08.07 |
| 개판 오분전 정규식(2) [5] | 미친개 | 2003.08.07 |
| 개판 오분전 정규식(3) [2] | 미친개 | 2003.08.07 |
| 개판 오분전 정규식(4) | 미친개 | 2003.08.07 |
다시 수정했습니다.
수정부분은
//
// 새창의 크기 설정
//
var winWidth = srcImg.width+10;
var winHeight = srcImg.height+29;
//
// 이미지로딩이 끝났음으로 이미지의 크기를 사용할수 있다.
// 해당 이미지의 사이즈에 맞게 윈도우를 재설정한다.
win.moveTo(left, top);
win.resizeTo(winWidth, winHeight);
여기 입니다.