-.- 이번에 jquery 갤러리를 달아보다, 기존에 있는 이미지 리사이징이나 인팝 이미지 뷰어가 필요없어서, 지워봤습니다.

굉장히 좋은 베니님의 lightbox 플러그인이 이미 제로보드에 있긴하지만 jquery를 쓰고 싶어서요 :)

혹 잘못된거가 있거나, 더 잘아시는 분들께서는 수정할수 있게 도와주세요 :)




이미지 뷰어 클릭만 안되게 하기

제로보드 폴더내의 /common/js/common.js 파일을 엽니다 (백업 잊지마세요!!)

255라인과 261 라인에 있는

            xAddEventListener(obj,"click", showOriginalImage);

이 부분을 지워줍니다.

이렇게 하시면 이미지 리사이징은 여전히 되지만 인팝 뷰어는 안뜹니다.

코딩을 깨끗히 하시자면

352라인부터 시작하는

                /**
                 * @brief 본문내에서 컨텐츠 영역보다 큰 이미지의 경우 원본 크기를 보여줌
                 **/
function showOriginalImage(evt) {

부터 507라인까지의
                xPreventDefault(evt);
                origDragManager.obj = obj;
                xAddEventListener(document, 'mouseup', origImageDragMouseUp, false);
                origImageDrag(obj, e.pageX, e.pageY);
            }
요 부분까지 지워주시면 되겠습니다

이러시면 리사이징은 그대로 되겠지만, 클릭은 안됩니다.


리사이징도 안되게 하기

이미지 뷰어 클릭 지우는 법은 하지 마시고,

213라인쯤에 있는 
            /**
             * @brief 화면내에서 상위 영역보다 이미지가 크면 리사이즈를 하고 클릭시 원본을 보여줄수 있도록 변경
             **/
            function resizeImageContents() {

이 부분부터

267라인까지 있는

                    }
                }
            }
            xAddEventListener(window, "load", resizeImageContents);

요 부분까지 지워주시면 되겠습니다. 그리구

352라인부터 시작하는

                /**
                 * @brief 본문내에서 컨텐츠 영역보다 큰 이미지의 경우 원본 크기를 보여줌
                 **/
function showOriginalImage(evt) {

부터 507라인까지의
                xPreventDefault(evt);
                origDragManager.obj = obj;
                xAddEventListener(document, 'mouseup', origImageDragMouseUp, false);
                origImageDrag(obj, e.pageX, e.pageY);
            }
요 부분까지 지워주시면 되겠습니다.



다른 갤러리 달아보기 [이건 ㅡ.ㅡ 다른 갤러리등을 설치후에 하시는 부분입니다)

lytebox도 있고, 또 jgallery나 여러 갤러리들이 있는데 :) 이번에 새 프로젝트에 JGallery 도입이 필요해서 해봤습니다.

Lightbox 플러그인과 이미지 자동 샘플링 코드를 봤는데 ㅠ_ㅠ 너무 어려버서, 걍 무식하게 했습니다.

아시겠지만 :) 갤러리 스크립트 대부분들이 <a href="#####" rel=lightbox[#####]><img src="#####"></a> 이런식으로 들어가잖아요.

본문에 파일첨부후 삽입되는 이미지들에 한해서만 이미지 인터셉트 (intercept)가 필요했습니다.

그래서 /modules/editor/tpl/js/uploader.js 를 고쳤습니다.


319 라인쯤부터 있는

            if(/\.(jpg|jpeg|png|gif)$/i.test(url)) {
                var text = "<img editor_component=\"image_link\" src=\""+url+"\" alt=\""+file_obj.filename+"\" />";
                editorReplaceHTML(iframe_obj, text);

이 부분을

            if(/\.(jpg|jpeg|png|gif)$/i.test(url)) {
                var text = "<a href=\""+url+"\" rel=\"jgallery[view]\"><img editor_component=\"image_link\" src=\""+url+"\" alt=\""+file_obj.filename+"\" /></a>";
                editorReplaceHTML(iframe_obj, text);

이런식으로 바꿨습니다.


무하하하 잘되네요



뭐 다른 갤러리나 pdf 문서 올리기 등에도 응용하기 좋을거 같아 올려봅니다 :)


제가 미숙해서 지우면 안되는걸 지웠을 수도 있으니, 고수님들의 따끔한 조언 기다리겠습니다 :)