웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
아래 이미지크기에 맞게 새창띄우는 소스(기능개선판) (-_-) 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
저도 정지웅님 처럼 오류가 있습니다... 헤결 방법은 없나여?...
제목 | 글쓴이 | 날짜 |
---|---|---|
ie60이상버전의 개인정보기능으로 인한 서비스문제 [2] | 날파리 | 2003.05.21 |
[간단팁] 윈도우즈 2003 에서 mysql 사용할때.. [5] | 오종선 | 2003.05.22 |
[진자 유용한] www 자동으로 붙여주기 [6] | Dopesoul | 2003.05.24 |
APM_Setup4 에서 에러페이지 띄우기 [2] | RedEye(kaist) | 2003.05.28 |
아파치 보안취약점 관련 버전 업데이트 | DearMai | 2003.05.30 |
iis + php + mysql 강좌 (윈도우설치) [5] | 이성헌 | 2003.06.01 |
iis + php + mysql 보충설명. [2] | 이성헌 | 2003.06.01 |
아파치 버츄얼웹서버에서 웹로그 분석툴 : Webalizer 설치 [2] [1] | 정인배 | 2003.06.02 |
네임(DNS) 서버 named.conf 설정 하기 | 정인배 | 2003.06.02 |
아파치 : Name-based Virtual Host 사용하기 | 정인배 | 2003.06.02 |
아파치 : IP-based Virtual Host 사용하기 | 정인배 | 2003.06.02 |
Windows Media 서비스에 대한 ISAPI 확장 결함 | DearMai | 2003.06.03 |
apache + php + mysql (window 설치) | 이성헌 | 2003.06.05 |
mysql 강좌 .. 요약본 [4] | 이성헌 | 2003.06.05 |
php 와 mysql 을 이용한 웹인증..(윈도우에서) | 이성헌 | 2003.06.05 |
apache 서버에서 apache 인증 (윈도우에서 apm 설치후) | 이성헌 | 2003.06.05 |
apache 서버에서 디렉토리 보기 방지. [5] | 이성헌 | 2003.06.08 |
윈98에서 Apache+iASP+Tomcat4.x+Mysql+PHP ...사용하기 [5] | 한희진 | 2003.06.11 |
webalizer 윈도우+아파치에서 돌려보기 [3] [1] | HuHu^^; | 2003.06.12 |
극심한 시스템 파괴시 재해복구 Process [7] | Dopesoul | 2003.06.14 |
좋은자료 감사해요~
지금 당장 해봐야 겠다~ㅋㅋ