이미지 팝업창
본문
지수아빠 님의 맛집
에 있는 이미지 박스를 이용하여 아래와 같이 이미지를 표시합니다.
아래쪽의 썸네일은 onmouseover로 위쪽에 resize된 원본이미지가 표시됩니다.
그런데, 이 resize된 원본이미지를 onclick 했을 때 팝업창으로 원본 이미지가 나타나게 하고 싶은데,
방법을 좀 알려 주세요.
이 부분의 코드는 아래와 같습니다.
<table class="viewtable" cellpadding="0" cellspacing="0">
<tr>
<td class="b_box">
<?php
// 파일 출력
$sql = "select * from {$g5['board_file_table']} where `bo_table`='$bo_table' and `wr_id`='$wr_id'";
$result=sql_query($sql);
for($i=0 ; $row = sql_fetch_array($result) ; $i++){
if($i > 0){
$style= "style=\"display:none\"";
}
$imgpath = $view['file'][$i]['path'];
$imgfile = $view['file'][$i]['file'];
$imgsrc = $imgpath.'/'.$imgfile;
$imgopen = "window.open('$imgsrc', '_blank', 'width=400, height=600, menubar=no, status=no, toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500')";
echo "<a href='javascript:void(0);' onclick='$imgopen'>";
echo "<img src='$imgsrc' border=0 id=img$i $style>";
echo "</a>";
$thumimg[$i]="<img src ={$view['file'][$i]['path']}/{$view['file'][$i]['file']} border=0 id=ThumbImage$i onfocus=\"javascript:ThumbViewer(this)\" onmouseover=\"javascript:ThumbViewer(this)\">";//{}''추가!!!
}
?>
</td>
</tr>
<tr>
<td height="10" style="padding-left:10px;">
<div id="text1"></div>
</td>
</tr>
<tr>
<td>
<table cellpadding=0 cellspacing=2 border=0>
<tr>
<?php
for ($i=0; $i<=9; $i++) {
$content2[$i]=nl2br($view['file'][$i]['content']); // 파일내용 보이게 ,엔터키
}
?>
<td width="20%" class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[0]?>')" onmouseout="javascript:change('')"><?=$thumimg[0]?></a></td>
<td width="20%" class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[1]?>')" onmouseout="javascript:change('')"><?=$thumimg[1]?></a></td>
<td width="20%" class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[2]?>')" onmouseout="javascript:change('')"><?=$thumimg[2]?></a></td>
<td width="20%" class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[3]?>')" onmouseout="javascript:change('')"><?=$thumimg[3]?></a></td>
<td width="20%" class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[4]?>')" onmouseout="javascript:change('')"><?=$thumimg[4]?></a></td>
</tr>
<tr>
<td class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[5]?>')" onmouseout="javascript:change('')"><?=$thumimg[5]?></a></td>
<td class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[6]?>')" onmouseout="javascript:change('')"><?=$thumimg[6]?></a></td>
<td class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[7]?>')" onmouseout="javascript:change('')"><?=$thumimg[7]?></a></td>
<td class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[8]?>')" onmouseout="javascript:change('')"><?=$thumimg[8]?></a></td>
<td class="s_box"><a href="#" onmouseover="javascript:change('<?=$content2[9]?>')" onmouseout="javascript:change('')"><?=$thumimg[9]?></a></td>
</tr>
</table>
</td>
</tr>
</table>
답변 2
onmouseout 관련을 지우시고 onmouseover를 onclick으로 바꾸세요
이렇게 바꾸어 보았습니다만, 이미지 팝업창이 뜨질 않네요.
<table class="viewtable" cellpadding="0" cellspacing="0">
<tr>
<td class="b_box">
<?php
// 파일 출력
$sql = "select * from {$g5['board_file_table']} where `bo_table`='$bo_table' and `wr_id`='$wr_id'";
$result=sql_query($sql);
for($i=0 ; $row = sql_fetch_array($result) ; $i++){
if($i > 0){
$style= "style=\"display:none\"";
}
$imgpath = $view['file'][$i]['path'];
$imgfile = $view['file'][$i]['file'];
$imgsrc = $imgpath.'/'.$imgfile;
$imgopen = "window.open('$imgsrc', '_blank', 'width=400, height=600, menubar=no, status=no, toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500')";
echo "<a href='javascript:void(0);' onclick='$imgopen'>";
echo "<img src='$imgsrc' border=0 id=img$i $style>";
echo "</a>";
$thumimg[$i]="<img src ={$view['file'][$i]['path']}/{$view['file'][$i]['file']} border=0 id=ThumbImage$i onfocus=\"javascript:ThumbViewer(this)\" onmouseover=\"javascript:ThumbViewer(this)\">";//{}''추가!!!
}
?>
</td>
</tr>
<tr>
<td height="10" style="padding-left:10px;">
<div id="text1"></div>
</td>
</tr>
<tr>
<td>
<table cellpadding=0 cellspacing=2 border=0>
<tr>
<?php
for ($i=0; $i<=9; $i++) {
$content2[$i]=nl2br($view['file'][$i]['content']); // 파일내용 보이게 ,엔터키
}
?>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[0]?>')"><?=$thumimg[0]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[1]?>')"><?=$thumimg[1]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[2]?>')"><?=$thumimg[2]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[3]?>')"><?=$thumimg[3]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[4]?>')"><?=$thumimg[4]?></a></td>
</tr>
<tr>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[5]?>')"><?=$thumimg[5]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[6]?>')"><?=$thumimg[6]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[7]?>')"><?=$thumimg[7]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[8]?>')"><?=$thumimg[8]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[9]?>')"><?=$thumimg[9]?></a></td>
</tr>
</table>
</td>
</tr>
</table>
<a href="javascript:change('<?=$content2[8]?>')">
이렇게 해보세요
<a href="javascript:change('<?=$content2[8]?>')">
로 바꿔봐도 안되네요.
이미지 주소를 팝업창으로 띄어주시면 원본이미지 확인이 가능합니다.
