오픈위키
문서 편집

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

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

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

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

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

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

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

사용한 Lightbox 라이브러리는

이다.

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

파일을 받아서 적당히 설치 한 뒤.. (이 경우 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를 봅니다…

1076줄 정도되는 곳에 보면 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);
}

lightboxindokuwiki.jpg

ALERT “Adora Belle” RC1 이후 갑자기 기본 템플릿에서 그림이 표시가 안되는 현상이 있었다.

basic.css 의 img 태그에 height: auto; 를 고치시면 된다.

V_L 2012/09/12 19:25

갤러리 플러긴은 내부에 이미 라이트박스 표시용 라이브러리을 가지고 있다.

라이트박스로 표시되길 원하는 그림의 링크에 rel="lightbox" 만 추가해주면 잘 표시된다. 이것은 위의 internal media, external media를 고치는 방법을 써야 한다.

누구나 수정하실 수 있다. 문법은 Formatting Syntax참조하라.
CC Attribution-Noncommercial-Share Alike 4.0 International 별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Noncommercial-Share Alike 4.0 International
6.4 KB tech/lightbox_in_dokuwiki.txt · 마지막으로 수정됨 2016/07/12 09:26 (바깥 편집) V_L 흠흠

0.012 seconds in processing this page on this powerful server.