도쿠위키에 라이트 박스 넣기 (Lightbox In Dokuwiki)

도쿠위키에서는 그림을 마우스로 클릭하면 새 페이지가 열립니다.

대신 그림을 확대 혹은 적절한 크기로 조절하여 팝업으로 보여주는 것이 Lightbox 이다.

원래 이런 일을 해주는 플러긴이 있다.

http://www.dokuwiki.org/plugin:lightboxv2

그런데, 표시되는 모든 그림을 가로채기 때문에, 링크 버튼으로 사용할 때에도 Lightbox 팝업이 떠서 사용할 수가 없었다.

그래서 , 직접 도쿠위키를 고쳐서 해보았다.

관련 라이브러리는 이미 오픈소스 공개된 것들이 많이 있다.

사용한 Lightbox 라이브러리는

http://serennz.sakura.ne.jp/toybox/lightbox/?en

이다.

라이브러리의 사용법은 간단한다.

파일을 받아서 적당히 설치 한 뒤.. (이 경우 vaslor.net/box ) lightbox_plus.js 파일에 실행 퍼미션을 주고..

스킨의 헤더에 자바스크립트 링크를 넣고,

 <script type="text/javascript" src="/box/lightbox_plus.js"></script>

각 이미지의 링크에는 rel="lightbox"를 추가하면된다. 혹은 그룹뷰 기능도 되도록 하려면, rel="lightbox[그룹명]" 추가.

 <a href="[...image...]" rel="lightbox" class="effectable">****</a>

이미지 링크에 rel="lightbox" 이것을 하려면… 이미지의 링크를 생성하는 도쿠위키 파일을 직접 고쳐야 한다..;;

도쿠위키 설치된 곳의 inc/parser/xhtml.php를 봅니다…

1176줄 정도되는 곳에 보면 function internalmedia 가 있다.

한줄을 빼고 두 줄을 추가한다.

    function internalmedia ($src, $title=NULL, $align=NULL, $width=NULL,
                            $height=NULL, $cache=NULL, $linking=NULL) {
        global $ID;
        list($src,$hash) = explode('#',$src,2);
        resolve_mediaid(getNS($ID),$src, $exists);
 
        $noLink = false;
        $render = ($linking == 'linkonly') ? false : true;
        $link = $this->_getMediaLinkConf($src, $title, $align, $width, $height, $cache, $render);
 
        list($ext,$mime,$dl) = mimetype($src,false);
        if(substr($mime,0,5) == 'image' && $render){
          //삭제  $link['url'] = ml($src,array('id'=>$ID,'cache'=>$cache),($linking=='direct'));
             $link['url']    = ml($src,array('cache'=>$cache));  //추가 vaslor
             $link['rel']="lightbox[".$ID."]";                            //추가 vaslor
 
        }elseif($mime == 'application/x-shockwave-flash' && $render){
            // don't link flash movies
            $noLink = true;
        }else{
            // add file icons
            $class = preg_replace('/[^_\-a-z0-9]+/i','_',$ext);
            $link['class'] .= ' mediafile mf_'.$class;
            $link['url'] = ml($src,array('id'=>$ID,'cache'=>$cache),true);
        }
 
        if($hash) $link['url'] .= '#'.$hash;
 
        //markup non existing files
        if (!$exists) {
            $link['class'] .= ' wikilink2';
        }
 
        //output formatted
        if ($linking == 'nolink' || $noLink) $this->doc .= $link['name'];
        else $this->doc .= $this->_formatLink($link);
    }

마찬가지로 외부 파일도 할 수 있다. 바로 다음에 있는 function externalmedia를 수정한다.

한 줄만 추가한다.

    function externalmedia ($src, $title=NULL, $align=NULL, $width=NULL,
                            $height=NULL, $cache=NULL, $linking=NULL) {
        list($src,$hash) = explode('#',$src,2);
        $noLink = false;
        $render = ($linking == 'linkonly') ? false : true;
        $link = $this->_getMediaLinkConf($src, $title, $align, $width, $height, $cache, $render);
 
        $link['url']    = ml($src,array('cache'=>$cache));
 
        list($ext,$mime,$dl) = mimetype($src,false);
        if(substr($mime,0,5) == 'image' && $render){
            // link only jpeg images
            // if ($ext != 'jpg' && $ext != 'jpeg') $noLink = true;
                         $link['rel']="lightbox[".$ID."]";  // 추가.. vaslor
        }elseif($mime == 'application/x-shockwave-flash' && $render){
            // don't link flash movies
            $noLink = true;
        }else{
            // add file icons
            $class = preg_replace('/[^_\-a-z0-9]+/i','_',$ext);
            $link['class'] .= ' mediafile mf_'.$class;
        }
 
        if($hash) $link['url'] .= '#'.$hash;
 
        //output formatted
        if ($linking == 'nolink' || $noLink) $this->doc .= $link['name'];
        else $this->doc .= $this->_formatLink($link);
    }

예쁘게 나오지 않는 것은 CSS가 제대로 먹지 않기 때문이다. 사용하는 템플리트에 Lightbox의 CSS를 추가해준다. 링크로 걸어주거나 얼마안되니 그냥 합쳐줘도 된다.

#lightbox {
    background-color: #eee;
    padding: 10px;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
}
#lightboxCaption {
    color: #333;
    background-color: #eee;
    font-size: 90%;
    text-align: center;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
}
#lightboxIndicator {
    border: 1px solid white;
}
#lightboxOverallView,
#overlay {
    background-color: #000;
    opacity: 0.5;
}
  * html #lightboxOverallView,
  * html #overlay {
    background-color: #000;
    filter: Alpha(opacity=50);
}