웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
-.- 이번에 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 문서 올리기 등에도 응용하기 좋을거 같아 올려봅니다 :)
제가 미숙해서 지우면 안되는걸 지웠을 수도 있으니, 고수님들의 따끔한 조언 기다리겠습니다 :)
큰이미지 자동 리사이즈 안되게 하기 + 다른 갤러리 달아보기
2008.04.12 08:45
-.- 이번에 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 문서 올리기 등에도 응용하기 좋을거 같아 올려봅니다 :)
제가 미숙해서 지우면 안되는걸 지웠을 수도 있으니, 고수님들의 따끔한 조언 기다리겠습니다 :)