웹마스터 팁
이미지 사이즈에 맞게 새창띄우기 [오류보완] 정확하게 안열리는 오류
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
테두리 없애는 방법좀 여쭐수 있을까요?
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |
| 레이어 4 - 뽀나수 하나 [1] | 미친개 | 2004.07.07 |
| 레이어 5 - 뽀나수 둘 [6] | 미친개 | 2004.07.07 |
| 웹 문서 암호화 스크립트 [1] | 미친개 | 2004.07.20 |
| 아이프레임으로 문서크기 자동조절하기(완벽판) [13] | 렌디 | 2004.07.21 |
| 문서에 따른 아이프레임 heigh(높이) 값 자동 조절 (수정본) [3] | 스토비━ⓒ | 2004.07.31 |
| 원하는 아이프레임부분을 리로드하자! [1] | †천상의燦† | 2004.08.02 |
| Javascipt로 구현한 MD5,MD4,SHA1 [10] | 장종석 | 2004.08.06 |
| 레이어를 클릭해서 보이거나 사라지게 하기 [3] | †천상의燦† | 2004.08.18 |
| 이미지 사이즈에 맞게 새창띄우기 [오류보완] 정확하게 안열리는 오류 [11] | beMax | 2004.08.18 |
| 싸이처럼 테이블 안에서 버튼으로 이동/스크롤 하기 [5] | 제로스 | 2004.09.09 |
| 랜디님의 iframe 크기조절 소스응용-iframe 최저길이 지정하기 [1] | 김수형 | 2004.09.10 |
| 셀렉트 메뉴를 통해 갤러리 만들기 | 한현종 | 2004.09.10 |
| 요일마다 바뀌는 상태바 인사 말~ [2] | Kasis | 2004.09.13 |
| 내홈피 즐겨찾기/새로고침/앞/뒤로가기 [4] | 팡이 | 2004.09.13 |
| 메뉴 추가 삭제 수정시 쓰면 좋을것 같네요 - 출처: http://www.happyscript.com/ [1] | 예뜨락 | 2004.09.17 |
| 슬라이딩 메뉴 자바스크립트 [3] | 행복한고니 | 2004.09.21 |
| 멀티 파일다운로드 꽁수로 구현하기 [1] | 행복한고니 | 2004.10.07 |
| 웹페이지에서 단축키 사용 (Firefox) [2] | 전종화 | 2004.10.07 |
| 자바스크립트로 구현한 윈도우 스타일.. [2] | 크래닉스 | 2004.10.07 |
다시 수정했습니다.
수정부분은
//
// 새창의 크기 설정
//
var winWidth = srcImg.width+10;
var winHeight = srcImg.height+29;
//
// 이미지로딩이 끝났음으로 이미지의 크기를 사용할수 있다.
// 해당 이미지의 사이즈에 맞게 윈도우를 재설정한다.
win.moveTo(left, top);
win.resizeTo(winWidth, winHeight);
여기 입니다.