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

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

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

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

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

원래 이런 일을 해주는 플러긴이 있다.
<WRAP center round box 60%>
http://www.dokuwiki.org/plugin:lightboxv2
</WRAP>

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

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

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

사용한 Lightbox 라이브러리는

<WRAP center round box 60%>
http://serennz.sakura.ne.jp/toybox/lightbox/?en
</WRAP>

이다.

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

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

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

각 이미지의 링크에는 **rel="lightbox"**를 추가하면된다.

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

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

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

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

<code php>
    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);
    }
</code>

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

한 줄만 추가한다.

<code php>    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);
    }
</code>

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

<code 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);
}
</code>

{{ http://img33.imageshack.us/img33/6457/lightboxindokuwiki.jpg?350 }}
{{image>http://img33.imageshack.us/img33/6457/lightboxindokuwiki.jpg}}

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

basic.css 의 img 태그에     height: auto; 를 고치시면 된다.   /*  height: auto; light box가 작동 안함. */

--- //[[dryoo@live.com|V_L]] 2012/09/12 19:25//

* 출처: [[http://openwiki.kr/tech/lightbox_in_dokuwiki|]]

=====Gallery plugin=====

[[https://www.dokuwiki.org/plugin:gallery|갤러리 플러긴]]은 내부에 이미 라이트박스 표시용 라이브러리을 가지고 있다.

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

^  누구나 수정하실 수 있다.  문법은 [[wiki:syntax]]참조하라. |

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International