일단 html 문서에서 그누보드의 함수를 이용하여 클릭시 이미지 새창 뜨는 방법 정보
일단 html 문서에서 그누보드의 함수를 이용하여 클릭시 이미지 새창 뜨는 방법본문
그누보드를 사용하고 있습니다.
일반 문서에서
<img src="<?=$g4['path']?>/image/1234.gif" width="200" height="295" border="0" alt="">
으로 그림을 불렀을 때
클릭하면 새창으로 원래 사이즈로 되고
다시 클릭하면 닫히게 하려면 어떻게 해야 할까요?
게시판내에서 링크된 그림이 자동으로 그러하듯이요.
부탁합니다.
댓글 전체
죄송하지만 질문의 요지를 잘못 아신 것 같네요...
저는 그누의 함수를 이용해서
<a href="javascript:self.open();"><img src="<?=$g4['path']?>/image/112.gif" width="200" height="295" border="0" alt=""></a>
요런게 있지 않을까 싶어서 질문한 거예요.
저는 그누의 함수를 이용해서
<a href="javascript:self.open();"><img src="<?=$g4['path']?>/image/112.gif" width="200" height="295" border="0" alt=""></a>
요런게 있지 않을까 싶어서 질문한 거예요.
유아원님이 답변하신게 제누보드님이 찾으시는게 맞는거 같은데요;;;
위에 유아원님이 링크하신 스킨파일의 list.skin.php 와 imgOpen.php 파일안에 제누보드님이 원하시는 답변이 있는거 같은뎅..^^;
위에 유아원님이 링크하신 스킨파일의 list.skin.php 와 imgOpen.php 파일안에 제누보드님이 원하시는 답변이 있는거 같은뎅..^^;
그누보드 이미지 새창 열기는 image_window() 라는 함수와 resizeBoardImage() 라는 함수를 같이 사용해야 작동합니다. 두 함수 모두 안에 g4라는 이름이 붙은 변수를 사용하기 때문에 일반페이지에 쓰기엔 적당하지 않습니다. 그래서 전 image_window()함수를 약간 변형한 다른 함수를 만들어 사용합니다. 함수 소스와 사용예는 아래와 같습니다.
<script>
// 이미지 새창 열기
function my_imageWindow(img)
{
var tmpImg = document.body.appendChild(document.createElement("img"));
tmpImg.src = img.src;
var w = tmpImg.width;
var h = tmpImg.height;
document.body.removeChild(tmpImg);
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/3;
if (w >= screen.width) {
winl = 0;
h = (parseInt)(w * (h / w));
}
if (h >= screen.height) {
wint = 0;
w = (parseInt)(h * (w / h));
}
var js_url = "<script language='JavaScript1.2'> \n";
js_url += "<!-- \n";
js_url += "var ie=document.all; \n";
js_url += "var nn6=document.getElementById&&!document.all; \n";
js_url += "var isdrag=false; \n";
js_url += "var x,y; \n";
js_url += "var dobj; \n";
js_url += "function movemouse(e) \n";
js_url += "{ \n";
js_url += " if (isdrag) \n";
js_url += " { \n";
js_url += " dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; \n";
js_url += " dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y; \n";
js_url += " return false; \n";
js_url += " } \n";
js_url += "} \n";
js_url += "function selectmouse(e) \n";
js_url += "{ \n";
js_url += " var fobj = nn6 ? e.target : event.srcElement; \n";
js_url += " var topelement = nn6 ? 'HTML' : 'BODY'; \n";
js_url += " while (fobj.tagName != topelement && fobj.className != 'dragme') \n";
js_url += " { \n";
js_url += " fobj = nn6 ? fobj.parentNode : fobj.parentElement; \n";
js_url += " } \n";
js_url += " if (fobj.className=='dragme') \n";
js_url += " { \n";
js_url += " isdrag = true; \n";
js_url += " dobj = fobj; \n";
js_url += " tx = parseInt(dobj.style.left+0); \n";
js_url += " ty = parseInt(dobj.style.top+0); \n";
js_url += " x = nn6 ? e.clientX : event.clientX; \n";
js_url += " y = nn6 ? e.clientY : event.clientY; \n";
js_url += " document.onmousemove=movemouse; \n";
js_url += " return false; \n";
js_url += " } \n";
js_url += "} \n";
js_url += "document.onmousedown=selectmouse; \n";
js_url += "document.onmouseup=new Function('isdrag=false'); \n";
js_url += "//--> \n";
js_url += "</"+"script> \n";
var settings;
settings ='width='+w+',';
settings +='height='+h+',';
settings +='top='+wint+',';
settings +='left='+winl+',';
settings +='scrollbars=no,';
settings +='resizable=yes,';
settings +='status=no';
win=window.open("","image_window",settings);
win.document.open();
win.document.write ("<html><head> \n<meta http-equiv='imagetoolbar' CONTENT='no'> \n<meta http-equiv='content-type' content='text/html;'>\n");
var size = "이미지 사이즈 : "+w+" x "+h;
win.document.write ("<title>"+size+"</title> \n");
if(w >= screen.width || h >= screen.height) {
win.document.write (js_url);
var click = "ondblclick='window.close();' style='cursor:move' title=' "+size+" \n\n 이미지 사이즈가 화면보다 큽니다. \n 왼쪽 버튼을 클릭한 후 마우스를 움직여서 보세요. \n\n 더블 클릭하면 닫혀요. '";
}
else {
var click = "onclick='window.close();' style='cursor:pointer' title=' "+size+" \n\n 클릭하면 닫혀요. '";
}
win.document.write ("<style>.dragme{position:relative;}</style> \n");
win.document.write ("</head> \n\n");
win.document.write ("<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> \n");
win.document.write ("<table width=100% height=100% cellpadding=0 cellspacing=0><tr><td align=center valign=middle><img src='"+img.src+"' width='"+w+"' height='"+h+"' border=0 class='dragme' "+click+"></td></tr></table>");
win.document.write ("</body></html>");
win.document.close();
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
</script>
<!-- 사용 -->
<img src="http://dotnet.oranc.co.kr/gn/data/file/gr01_free/988433634_b994ce93_image01.jpg" width="600" onClick="my_imageWindow(this);">
<script>
// 이미지 새창 열기
function my_imageWindow(img)
{
var tmpImg = document.body.appendChild(document.createElement("img"));
tmpImg.src = img.src;
var w = tmpImg.width;
var h = tmpImg.height;
document.body.removeChild(tmpImg);
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/3;
if (w >= screen.width) {
winl = 0;
h = (parseInt)(w * (h / w));
}
if (h >= screen.height) {
wint = 0;
w = (parseInt)(h * (w / h));
}
var js_url = "<script language='JavaScript1.2'> \n";
js_url += "<!-- \n";
js_url += "var ie=document.all; \n";
js_url += "var nn6=document.getElementById&&!document.all; \n";
js_url += "var isdrag=false; \n";
js_url += "var x,y; \n";
js_url += "var dobj; \n";
js_url += "function movemouse(e) \n";
js_url += "{ \n";
js_url += " if (isdrag) \n";
js_url += " { \n";
js_url += " dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; \n";
js_url += " dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y; \n";
js_url += " return false; \n";
js_url += " } \n";
js_url += "} \n";
js_url += "function selectmouse(e) \n";
js_url += "{ \n";
js_url += " var fobj = nn6 ? e.target : event.srcElement; \n";
js_url += " var topelement = nn6 ? 'HTML' : 'BODY'; \n";
js_url += " while (fobj.tagName != topelement && fobj.className != 'dragme') \n";
js_url += " { \n";
js_url += " fobj = nn6 ? fobj.parentNode : fobj.parentElement; \n";
js_url += " } \n";
js_url += " if (fobj.className=='dragme') \n";
js_url += " { \n";
js_url += " isdrag = true; \n";
js_url += " dobj = fobj; \n";
js_url += " tx = parseInt(dobj.style.left+0); \n";
js_url += " ty = parseInt(dobj.style.top+0); \n";
js_url += " x = nn6 ? e.clientX : event.clientX; \n";
js_url += " y = nn6 ? e.clientY : event.clientY; \n";
js_url += " document.onmousemove=movemouse; \n";
js_url += " return false; \n";
js_url += " } \n";
js_url += "} \n";
js_url += "document.onmousedown=selectmouse; \n";
js_url += "document.onmouseup=new Function('isdrag=false'); \n";
js_url += "//--> \n";
js_url += "</"+"script> \n";
var settings;
settings ='width='+w+',';
settings +='height='+h+',';
settings +='top='+wint+',';
settings +='left='+winl+',';
settings +='scrollbars=no,';
settings +='resizable=yes,';
settings +='status=no';
win=window.open("","image_window",settings);
win.document.open();
win.document.write ("<html><head> \n<meta http-equiv='imagetoolbar' CONTENT='no'> \n<meta http-equiv='content-type' content='text/html;'>\n");
var size = "이미지 사이즈 : "+w+" x "+h;
win.document.write ("<title>"+size+"</title> \n");
if(w >= screen.width || h >= screen.height) {
win.document.write (js_url);
var click = "ondblclick='window.close();' style='cursor:move' title=' "+size+" \n\n 이미지 사이즈가 화면보다 큽니다. \n 왼쪽 버튼을 클릭한 후 마우스를 움직여서 보세요. \n\n 더블 클릭하면 닫혀요. '";
}
else {
var click = "onclick='window.close();' style='cursor:pointer' title=' "+size+" \n\n 클릭하면 닫혀요. '";
}
win.document.write ("<style>.dragme{position:relative;}</style> \n");
win.document.write ("</head> \n\n");
win.document.write ("<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> \n");
win.document.write ("<table width=100% height=100% cellpadding=0 cellspacing=0><tr><td align=center valign=middle><img src='"+img.src+"' width='"+w+"' height='"+h+"' border=0 class='dragme' "+click+"></td></tr></table>");
win.document.write ("</body></html>");
win.document.close();
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
</script>
<!-- 사용 -->
<img src="http://dotnet.oranc.co.kr/gn/data/file/gr01_free/988433634_b994ce93_image01.jpg" width="600" onClick="my_imageWindow(this);">