웹마스터 팁
아래 이미지크기에 맞게 새창띄우는 소스(기능개선판) (-_-) v
2002.12.07 12:18
<script>
function gonyImgWin(img){
// by 행복한고니 (http://mygony.com)
var imgTmp = new Image();
imgTmp.src = img;
var imgWin = window.open("","gImgWin","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>");
}
</script>
먼저 위와 같은 스크립트를 가져다가 붙입니다. <head>와 </head>사이도 좋고 <body>와 </body>사이 어디에도 좋습니다. 그리고 사용은 다음과 같이 합니다.
gonyImgWin("그림의 소스가 되는 경로"); //큰 따옴표 대신 작은 따옴표도 가능합니다
클릭해서 새 창을 띄우도록 하고 싶다면 다음과 같이 쓰면 되는 거죠~ *^^*
<a href="javascript:gonyImgWin('경로')">미리보기를 보시려면 클릭!!</a> 혹은
<a href="#view" onClick="gonyImgWin('경로')">미리보기를 보시려면 클릭!!</a> 와 같은 식의 사용도 가능합니다.
아래 소스에서 여백이 안없어지는 점을 개선하고 이미지를 클릭하면 창이 닫히는 기능을 추가했습니다. 간단한 소스라 주석은 안 붙였습니다. 아! 그리고 칸이 길어서 나눠지게 됐는데 window.open이 포함된 줄에 var imgWin ← 이거부터 resizable=no"); ← 이거까지 전부 한줄에 써야합니다.
의문나는 사항은 쪽지나 코멘트(권장)로 부탁드립니다
건전한 리플 및 딴지, 무단 기능개선 적극 환영입니다. (-_-) v
주의점 :: 이 소스는 크게 보여줄 그림을 강제로 줄여서 보여주는 경우에 사용하시는 것이 좋습니다. 썸네일과 보여주고자 하는 그림이 따로 있을 경우엔 제 이름으로 검색하셔서 "갤러리 스킨..."을 찾으세요.
function gonyImgWin(img){
// by 행복한고니 (http://mygony.com)
var imgTmp = new Image();
imgTmp.src = img;
var imgWin = window.open("","gImgWin","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>");
}
</script>
먼저 위와 같은 스크립트를 가져다가 붙입니다. <head>와 </head>사이도 좋고 <body>와 </body>사이 어디에도 좋습니다. 그리고 사용은 다음과 같이 합니다.
gonyImgWin("그림의 소스가 되는 경로"); //큰 따옴표 대신 작은 따옴표도 가능합니다
클릭해서 새 창을 띄우도록 하고 싶다면 다음과 같이 쓰면 되는 거죠~ *^^*
<a href="javascript:gonyImgWin('경로')">미리보기를 보시려면 클릭!!</a> 혹은
<a href="#view" onClick="gonyImgWin('경로')">미리보기를 보시려면 클릭!!</a> 와 같은 식의 사용도 가능합니다.
아래 소스에서 여백이 안없어지는 점을 개선하고 이미지를 클릭하면 창이 닫히는 기능을 추가했습니다. 간단한 소스라 주석은 안 붙였습니다. 아! 그리고 칸이 길어서 나눠지게 됐는데 window.open이 포함된 줄에 var imgWin ← 이거부터 resizable=no"); ← 이거까지 전부 한줄에 써야합니다.
의문나는 사항은 쪽지나 코멘트(권장)로 부탁드립니다
건전한 리플 및 딴지, 무단 기능개선 적극 환영입니다. (-_-) v
주의점 :: 이 소스는 크게 보여줄 그림을 강제로 줄여서 보여주는 경우에 사용하시는 것이 좋습니다. 썸네일과 보여주고자 하는 그림이 따로 있을 경우엔 제 이름으로 검색하셔서 "갤러리 스킨..."을 찾으세요.
댓글 10
-
새벽이슬
2002.12.07 12:28
-
사랑지기
2002.12.07 20:28
-_-;;서명이 짱이군요;; -
행복한고니
2002.12.09 03:20
gif, jpg, bmp 상관없는데요?
소스를 보시면 알겠지만, 그림파일의 확장자와는 아무 관련도 없습니다.
아마 png도 가능하리라고 봅니다만...? -
느낌이오는아이
2002.12.09 23:34
+"<a href='javascript:self.close()'><img src='"+img+"' width="+imgTmp.width+" height="+imgTmp.height+" border=0></a>"
이부분에서
<a href='javascript:self.close()'>여기를
<a href='javascript:self.close()' title='닫기'>
라고 해주시면 새창으로 뜬 이미지에 마우스를 올리고있으면
"닫기"라는 설명이 뜨겠죠.. -
유경균
2002.12.12 04:04
↑ 윗분의 설명에 조금 더 덧붙이자면
<a href='javascript:self.close()' onfocus='this.blur()' title='닫기'>
이렇게 넣으면 창을 닫으려고 이미지를 클릭했을때 이미지 테두리에 점선이 생기지 않습니다.
음..무슨얘기냐면 모든 링크된 글씨나 이미지를 클릭하면 그 버튼의 테두리에 점선이 생기는데요
그 점선이 안생긴다는 얘기입니다.
이해가 안가신다면 해보세요. 제 말실력이 이정도 밖에........; -
정지웅
2002.12.30 03:06
음...
이거 저만 그런건가여... 오류가 있는거 같아서여...
이미지 링크를 걸었을때여...
그페이지에 링크가 하나만 걸려있는 페이지에서는 이미지에 맞게 창이 제대로 뜨는데여...
이미지 링크가 여러개가 한페이지에 걸려있을때 이미지를 클릭하면 이미지에 맞게 창이 뜨지않고 그림이 없는 그냥 공백 화면이 크게 뜹니다... 왜그렇죠.. 답변좀 부탁드립니다. -
정지웅
2002.12.30 03:24
아니네 방금 또 확인해보니깐 이미지 링크가 하나만 걸려있는 페이지에서도 큰 창이 뜨는군요...
그리고 첨에 한번 크게 뜨고 그 창을 닫고 다시 클릭하면 제대로 뜨거든요... -
띠엠므
2003.05.14 13:32
음, 이소스의 단점은 처음 그림을 로딩할 때 못읽고 그냥 큰 창으로 떠버리는 오류가 자꾸 발생한다는거네요.
여러번 테스트를 해봤는데 계속 그런것 같아요. 고수님들 무슨 좋은 방법 없나요 ?
꼭, 처음에만 크게 빈걸로 뜨고 그 다음부턴 괜찮은데 말이져~ -
신이
2003.10.30 15:35
아~ 너무 찾던건데.. 감사합니다..^_____^ -
코난
2004.04.12 16:06
저도 정지웅님 처럼 오류가 있습니다... 헤결 방법은 없나여?...
좋은자료 감사해요~
지금 당장 해봐야 겠다~ㅋㅋ