2003년 1월 8일 이후 
모두 명  오늘 명 
메인 페이지  
칼럼 보기  
카툰 보기  
게시판 가기  
사이트맵  
그밖의 것들  

가입하면 정말 편합니다;;
리디 스타일
랜덤배너 북마크
펌 전용 이모테이퍼
 

The others
리디폭스닷컴 빌딩맵
리디폭스닷컴을 만들때 사용된 각종 소스를 모았습니다.
질문은 질답게시판에서만 받습니다.

 이미지박스 업그레이드 - 캡션기능을 달자  
 리디  posted at 2004-03-16 02:19:06
6332 hits  1 comments
 http://reedyfox.com/fox NeWin reedyfox is level 39  llllllllll 
File #1 : imgbox1.gif (48.1 KB)   Download : 77
File #2 : imgbox2.gif (85.3 KB)   Download : 75
 퍼머링크 : http://reedyfox.com/island.php/building/81  [복사]



"태터툴즈"에는 캡션 기능이 있습니다. 스샷에서 보이듯이 그림 아래에 간략한 설명을 추가하는 건데요. 꽤 맘에 들어서 제로보드 이미지박스에 기능을 추가해보았습니다. 그 외에, 이미지 정렬 방식 중 별 의미가 없는 것들을 지우고, '일반-가운데-왼쪽-오른쪽' 정렬로 간소화 했습니다. 왼쪽/오른쪽 정렬시 좌우 여백을 주면 가장자리에 공간이 떠서 보기 싫었는데 태터툴즈 처럼 margin-right, margin-left 를 사용해 그 문제점을 없앴습니다.

또한 사실상 필요성도 못느끼고, 썸네일로 사용하는데 막대한 방해가 되었던 이미지 세로 길이 지정하는 부분을 삭제하고, 외부 이미지를 이미지박스를 이용해 간단히 삽입할 수 있도록 했습니다. 물론 가로 폭 조정이 가능합니다.


1) 먼저 자동링크 기능과 간섭을 일으키지 않게 하기 위해 lib.php 를 조금 수정해야 합니다.
874행 이하를 다음과 같이 수정합니다.

    // URL, Mail을 자동으로 체크하여 링크만듬
    function autolink($str) {
    
바로 아래에 다음을 삽입합니다.

        //임의의 공백을 삽입
        $str = " ".$str;


그리고 다음을

                // URL 치환
                $homepage_pattern = "/([^\"\'\=\>])(http|HTTP|ftp|FTP|telnet|TELNET)\:\/\/(.[^ \n\<\"\']+)/";
                $str = preg_replace($homepage_pattern,"\\1<a href=\\2://\\3 target=_blank>\\2://\\3</a>", " ".$str);

다음과 같이 수정합니다.

       // URL 치환
        $homepage_pattern = "/( |\n)(http|HTTP|ftp|FTP|telnet|TELNET)\:\/\/(.[^\n\<\"\' ]+)/";
        $str = preg_replace($homepage_pattern,"\\1<a href=\\2://\\3>\\2://\\3</a>", " ".$str);




2) image_box.php 134행부터 173행까지의 스크립트를 다음으로 통째로 교체합니다.

<script>
function imagecheck(str,iwidth,iheight) {
        document.imageList.i_filename.value=str;
        document.imageList.i_width.value=iwidth;
        var obj=document.all['inputTable'];
        obj.style.visibility='visible';
}
function putStr() {
        var img_str="";
        var img_filename="";
        var img_align="";
        var img_width="";
        var img_vspace="";
        var img_hspace="";
        var img_border="";
        if(opener.window.document.all["write"]&&opener.window.document.all["write"].subject) {
                img_filename=document.imageList.i_filename.value;
                img_width=document.imageList.i_width.value;
                img_vspace=document.imageList.i_vspace.value;
                img_hspace=document.imageList.i_hspace.value;
                img_align=document.imageList.i_align.value;
                img_border=document.imageList.i_border.value;
                img_str = "[img"+img_align+"|"+img_filename+"|"+img_width+"|"+img_vspace+"|"+img_hspace+"|"+img_border+"]";
                if(img_align=="") {
                        img_str = "\n"+img_str;
                }
                opener.document.write.memo.value = opener.document.write.memo.value + img_str;
        } else {
                alert ("글쓰기 화면에서만 사용하실수 있습니다");
        }
        var obj=document.all['inputTable'];
        obj.style.visibility='hidden';
}
function putouterStr() {
        var img_str="";
        var img_url="";
        var img_align="";
        var img_vspace="";
        var img_hspace="";
        var img_border="";
        var img_height="";
        if(opener.window.document.all["write"]&&opener.window.document.all["write"].subject) {
                img_url=document.imageList.i_url.value;
                img_vspace=document.imageList.i_vspace.value;
                img_hspace=document.imageList.i_hspace.value;
                img_align=document.imageList.i_align.value;
                img_border=document.imageList.i_border.value;
                img_height=document.imageList.i_height.value;
                img_str = "[outerimg"+img_align+"|"+img_url+"|"+img_vspace+"|"+img_hspace+"|"+img_border+"|"+img_height+"]";
                if(img_align=="") {
                        img_str = "\n"+img_str;
                }
                opener.document.write.memo.value = opener.document.write.memo.value + img_str;
        } else {
                alert ("글쓰기 화면에서만 사용하실수 있습니다");
        }
        var obj=document.all['inputTable'];
        obj.style.visibility='hidden';
}
function alignset(str) {
        document.imageList.i_align.value=str;
}
</script>





198행부터 272행까지의 div 부분도 다음으로 교체합니다. 자잘구레하게 바뀐게 많아 통째로 교체하는 겁니다.


<div id='inputTable' style='position:absolute; left:50px; top:120px; width:500px; height: 250; z-index:1; visibility: hidden'>
        <table border=0 width=98% cellspacing=1 cellpadding=3 bgcolor=black>
        <tr>
                <td bgcolor=#F9F9F9>
                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>

                        <table border=0 cellspacing=0 cellpadding=4 width=100%>
                        <tr>
                                <td><b>그림파일</b> : <input type=input value="" size=25 class=input name=i_filename style=height:16px></td>
                        </tr>
                        </table>

                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>

                        <table border=0 cellspacing=0 cellpadding=4 width=100%>
                        <tr>
                                <td><b>정렬기준</td>
                                <td>
                                        <table border=0 cellspacing=0 cellpadding=0 width=100%>
                                        <col width=17%></col><col width=17%></col><col width=17%></col><col width=17%></col><col width=17%></col><col width=17%></col>
                                        <tr>
                                                <td><img src=images/im_i_normal.gif border=0></td>
                                                <td><img src=images/im_i_center.gif border=0></td>
                                                <td><img src=images/im_i_left.gif border=0></td>
                                                <td><img src=images/im_i_right.gif border=0></td>
                                        </tr>
                                        <tr>
                                                <td><input type=radio name=aligncheck checked onclick=alignset('')> 일 반</td>
                                                <td><input type=radio name=aligncheck onclick=alignset('center')> 중간</td>
                                                <td><input type=radio name=aligncheck onclick=alignset('left')> 왼쪽</td>
                                                <td><input type=radio name=aligncheck onclick=alignset('right')> 오른쪽</td>
                                        </tr>
                                        </table>

                                </td>
                        </tr>
                        </table>

                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>

                        <table border=0 cellspacing=0 cellpadding=4 width=100%>
                        <tr>
                                <td nowrap height=30><b>크기지정</td>
                                <td width=100%>
                                        가로 : <input type=input value="" size=3 class=input name=i_width style=height:16px><b> px  </b>
                                        <b>여백지정 <input type=input value="0" size=3 class=input name=i_hspace style=height:16px> px  </b>
                                </td>
                                <td align=right nowrap><b>테두리두께</b> : <input type=input name=i_border size=2 class=input value="1" style=height:16px> px</td>
                        </tr>
                        </table>
                        
                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>
                        
                        <table border=0 cellspacing=0 cellpadding=4 width=100%>
                        <tr>
                                <td nowrap height=20 colspan=2><b>외부 이미지 경로</b>   외부에 있는 이미지를 본문에 삽입할 때 사용합니다.</td>
                        </tr>
                        <tr>
                                <td width=40> </td>
                                <td>
                                           URL : <input type=text name=i_url class=input style='width:365px' style=height:16px><br>
                                           외부 이미지의 가로 크기 : <input type=input value="200" size=3 class=input name=i_height style=height:16px><b> px  (디폴트는 200픽셀입니다.)</b>
                                </td>
                        </tr>
                        </table>
                        
                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>

                        <table border=0 cellspacing=0 cellpadding=4 width=100%>
                        <tr>
                                <td colspan=2 nowrap>
                                        <b>그림설명</b>  <input value=' ' type=text style='width:400px' class=input name=i_vspace style=height:16px>  
                                </td>
                        </tr>
                        <tr>
                                <td width=40></td>
                                <td>
                                        그림 아래에 표시되는 간략한 설명글입니다. 안 써도 됩니다. :)
                                </td>
                        </tr>
                        </table>
                        
                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>

                        <table border=0 cellspacing=0 cellpadding=4 width=100%>
                        <tr>
                                <td colspan=2 align=right nowrap><a href="javascript:void(putStr())"><img src=images/im_input.gif border=0></a> <a href="javascript:void(putouterStr())"><img src=images/im_outerinput.gif border=0></a> <a href=# onclick=inputTable.style.visibility='hidden'><img src=images/im_close.gif border=0></a></td>
                        </tr>
                        </table>

                        <img src=images/t.gif border=0 height=3><br><img src=images/im_underline.gif border=0 width=100% height=2><br><img src=images/t.gif border=0 height=3><br>
                        
                </td>
        </tr>
        </table>
        <table border=0 width=95% bgcolor=888888 height=3 cellspacing=0 cellpadding=0><tr><td></td><tr></table>
        

</div>




images/im_outerinput.gif 는 적당히 만들어 쓰세요.






3) include/list_check.php 88행을 보시면

                // 이미지 박스 사용을 위해서 정규표현식 사용
                if($data[ismember]) {
                        $imageBoxPattern = "/\[img\:(.+?)\.(jpg|gif)\,align\=([a-z]){0,}\,width\=([0-9]+)\,height\=([0-9]+)\,vspace\=([0-9]+)\,hspace\=([0-9]+)\,border\=([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<img src='icon/member_image_box/$data[ismember]/\\1.\\2' align='\\3' width='\\4' height='\\5' vspace='\\6' hspace='\\7' border='\\8'>", stripslashes($data[memo]));
                } else {
                        $data[memo]=stripslashes($data[memo]);
                }


이런 부분이 있습니다. 여기서 다음과 같이 } else { 바로 위에 공간을 내시고


                // 이미지 박스 사용을 위해서 정규표현식 사용
                if($data[ismember]) {
                        $imageBoxPattern = "/\[img\:(.+?)\.(jpg|gif)\,align\=([a-z]){0,}\,width\=([0-9]+)\,height\=([0-9]+)\,vspace\=([0-9]+)\,hspace\=([0-9]+)\,border\=([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<img src='icon/member_image_box/$data[ismember]/\\1.\\2' align='\\3' width='\\4' height='\\5' vspace='\\6' hspace='\\7' border='\\8'>", stripslashes($data[memo]));


====== 여기입니다. ============

                } else {
                        $data[memo]=stripslashes($data[memo]);
                }





거기다가 다음을 삽입합니다.


                        $imageBoxPattern = "/\[img\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<table><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' vspace='\\5' hspace='\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table>", stripslashes($data[memo]));

                        $imageBoxPattern = "/\[imgcenter\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<center><table><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' vspace='\\5' hspace='\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table></center>", stripslashes($data[memo]));
                        
                        $imageBoxPattern = "/\[imgleft\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<table align=left><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' style='margin-right:\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table>", stripslashes($data[memo]));

                        $imageBoxPattern = "/\[imgright\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<table align=right><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' style='margin-left:\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table>", stripslashes($data[memo]));
                        
                        $imageBoxPattern = "/\[outerimg\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<table><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' vspace='\\4' hspace='\\4' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($data[memo]));

                        $imageBoxPattern = "/\[outerimgcenter\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<center><table><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' vspace='\\4' hspace='\\4' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($data[memo]));

                        $imageBoxPattern = "/\[outerimgleft\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<table align=left><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' style='margin-right:\\5' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($data[memo]));

                        $imageBoxPattern = "/\[outerimgright\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                        $data[memo]=preg_replace($imageBoxPattern,"<table align=right><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' style='margin-left:\\5' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($data[memo]));










4) outlogin.php 를 열어보면 218행 쯤에 위와 비슷한 부분이 있습니다.

                        if($data[ismember]) {
                                $imageBoxPattern = "/\[img\:(.+?)\.(jpg|gif)\,align\=([a-z]){0,}\,width\=([0-9]+)\,height\=([0-9]+)\,vspace\=([0-9]+)\,hspace\=([0-9]+)\,border\=([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<img src='".$_zb_url."icon/member_image_box/$data[ismember]/\\1.\\2' align='\\3' width='\\4' height='\\5' vspace='\\6' hspace='\\7' border='\\8'>", stripslashes($memo));
                        }

여기서는 } 바로 위에 공간을 내시고 다음을 삽입하세요.



                                $imageBoxPattern = "/\[img\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<table><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='".$_zb_url."icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' vspace='\\5' hspace='\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table>", stripslashes($memo));

                                $imageBoxPattern = "/\[imgcenter\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<center><table><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='".$_zb_url."icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' vspace='\\5' hspace='\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table></center>", stripslashes($memo));
                        
                                $imageBoxPattern = "/\[imgleft\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<table align=left><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='".$_zb_url."icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' style='margin-right:\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table>", stripslashes($memo));

                                $imageBoxPattern = "/\[imgright\|(.+?)\.(jpg|gif|png)\|([0-9]+)\|([^\n]*)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<table align=right><tr><td><img style=\"cursor:hand;\" onclick=window.open(this.src) src='".$_zb_url."icon/member_image_box/$data[ismember]/\\1.\\2' width='\\3' style='margin-left:\\5' border='\\6'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\3>\\4</td></tr></table></td></tr></table>", stripslashes($memo));
                        
                                $imageBoxPattern = "/\[outerimg\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<table><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' vspace='\\4' hspace='\\4' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($memo));

                                $imageBoxPattern = "/\[outerimgcenter\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<center><table><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' vspace='\\4' hspace='\\4' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($memo));

                                $imageBoxPattern = "/\[outerimgleft\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<table align=left><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' style='margin-right:\\5' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($memo));

                                $imageBoxPattern = "/\[outerimgright\|(.+?)\.(jpg|gif|png)\|([^\n]*)\|([0-9]+)\|([0-9]+)\|([0-9]+)\]/i";
                                $memo=preg_replace($imageBoxPattern,"<table align=right><tr><td><img width='\\6' style=\"cursor:hand;\" onclick=window.open(this.src) src='\\1.\\2' style='margin-left:\\5' border='\\5'></td></tr><tr><td align=center><table><tr><td class=mor_o align=center width=\\6>\\3</td></tr></table></td></tr></table>", stripslashes($memo));



이상에서 사용된 소스중 제가 임의로 지정한 class 는 여러분에게 알맞게 수정하세요.


  PRINT Text  PRINT HTML  

  Trackbacks for this Posting (0)
'생각하는섬 바닷가 - 이미지박스 업그레이드 - 캡션기능을 달자'

LIST ALL               GO TO THE TOP


Copyright 1999-2020 Zeroboard

 
생각하는 섬, 바닷가는 리디가 운영하는 개인 칼럼 사이트이며 일부 컨텐츠는 리디 외의 필진에 의해 작성되었습니다. 이곳의 모든 컨텐츠는 출처(Deep Link URL) 및 작가를 명시하는 조건으로 비상업적 용도의 전제/복제가 가능합니다. 그러나 이곳에 게재된 컨텐츠의 취지 또는 작가의 의도가 왜곡되어 해석될 수 있는 컨텐츠 변형은 금지합니다. 이곳에 기재된 전자우편주소에 대한 일체의 수집행위를 거부합니다.(게시일 2008년 1월 1일)
Google
  비내리는 밤 by 흐누  
Window close