이미지 팝업창

이미지 팝업창

QA

이미지 팝업창

본문

 

지수아빠 님의 맛집

https://sir.kr/g5_skin/32431

에 있는 이미지 박스를 이용하여 아래와 같이 이미지를 표시합니다.

아래쪽의 썸네일은 onmouseover로 위쪽에 resize된 원본이미지가 표시됩니다.

 

그런데, 이 resize된 원본이미지를 onclick 했을 때 팝업창으로 원본 이미지가 나타나게 하고 싶은데,

방법을 좀 알려 주세요.

 

3542522442_1635715629.1721.png

 

이 부분의 코드는 아래와 같습니다.

 


<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>

답변을 작성하시기 전에 로그인 해주세요.
전체 773
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT