차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- tech:lightbox_in_dokuwiki [2014/01/07 16:12] – anon
+++ tech:lightbox_in_dokuwiki [2019/03/24 14:43] (현재) – V_L
@@ 줄 1: / 줄 1: @@
+{{tag>tech lightbox 도쿠위키 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** 파일에 실행 퍼미션을 주고..
+스킨의 헤더에 자바스크립트 링크를 넣고,
+ <code javascript> <script type="text/javascript" src="/box/lightbox_plus.js"></script></code>
+각 이미지의 링크에는 **rel="lightbox"**를 추가하면된다.
+혹은 그룹뷰 기능도 되도록 하려면, **rel="lightbox[그룹명]"** 추가.
+<code html> <a href="[...image...]" rel="lightbox" class="effectable">****</a>
+</code>
+이미지 링크에 rel="lightbox" 이것을 하려면... 이미지의 링크를 생성하는 도쿠위키 파일을 직접 고쳐야 한다..;;
+도쿠위키 설치된 곳의 **inc/parser/xhtml.php**를 봅니다...
+줄 정도되는 곳에 보면 **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가 작동 안함. */
+ --- //[[[email protected]|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]]참조하라. |