라이트박스 애드온 0.7.1

| 웹프로그래밍 #
Posted 2007/11/24 03:11
※ 이 애드온은 제로보드 공식사이트에서도 다운로드 하실 수 있습니다.
※ 0.7.0의 배포본에 약간의 실수가 있었습니다. (한 글자를 잘못 썼네요) 그 바람에 아주 작은 기능 하나 덧붙여서 다시 업그레이드 하였습니다. 0.7을 사용하시는 분은 반드시 0.7.1로 패치해주시면 감사하겠습니다.

이 애드온은 현재 Zeroboard XE 0.2.6에서 테스트되었습니다. 현재 이 애드온의 버전은 0.7.1입니다. 이 버전은 0.2.4이하의 XE버전(알바트로스 이전)에서 작동되지 않습니다.

0.7.1에서 바뀐점
- 본문내 링크가 된 이미지(A태그 사용)는 라이트박스에 추가하지 않습니다. 그러나 이 경우에도 이미지가 너무 큰 경우에는 리사이즈를 합니다.
- 부분 적용 루틴이 오작동되는 버그를 수정하였습니다.

0.7에서 바뀐점
- XE 알바트로스 이후 버전과 호환되지 않던 문제를 해결하였습니다.
- XE 알바트로스부터 추가된 문서/댓글의 본문 마킹방식 때문에 더이상 엉뚱한 이미지를 목록에 추가시키지 않습니다.
- 자동 축소 루틴의 버그를 수정하였습니다.
- 치명적인 내부 오류를 수정했습니다.
- 슬라이드쇼 방식이 추가되었습니다. 아울러 슬라이드쇼의 간격을 "초"단위로 정의할 수 있습니다. 자세한 내용은 설정화면을 참고하시기 바랍니다.
- 스크립트 사이즈가 줄어들었습니다.
- Lytebox 3.2.2를 적용하였습니다. 이에 따라 기존 버전에서 가지고 있던 "Internet Explorer에서의 Alpha 채널 출력 오류" 버그가 수정되었습니다.(그외 자세한 내용은 Lytebox 홈페이지를 참고해주시기 바랍니다.)
- 라이센스 방식이 GPL에서 Creative Commons 3.0으로 변경되었습니다.
- 이외 Lytebox의 기본동작 방식을 약간 바꾸었습니다. 지나치게 큰 이미지의 경우에 현재 브라우저 크기로 자동 리사이즈되는 기능을 활성화하였습니다.

이 애드온은 제로보드 XE로 만든 웹사이트에 포함된 이미지를 자동으로 라이트박스 모듈과 연결시켜줍니다. 아울러 제로보드 XE에 기본적으로 포함된 이미지 자동축소 루틴을 라이트박스 모듈과 연결시키는 루틴으로 교체해줍니다.

라이트 박스가 무엇인지 궁금하시다면 아래의 사진을 클릭해보시기 바랍니다.

big_photo.jpg

Q. 사진이 축소되어 나오는 것이 싫습니다. 이전 버전처럼 동작하게 하려면 어떻게 하나요?
A. 애드온 디렉토리 아래의 lytebox/lytebox.js 파일을 에디터로 엽니다. 이 파일의 58번째 줄을 보시면 this.autoResize = true; 라고 되어 있는데 이것을 this.autoResize = false; 로 변경하시면 이전 버전과 동일하게 동작합니다.

※ 이전 버전의 사용자분도 기존 설치 디렉토리를 지우고 다시 설치하시기를 권장합니다.
※ 애드온이 이상작동을 일으키면 캐시재생성을 해주시기 바랍니다.

설치방법


1) 첨부된 파일을 다운로드 받습니다. (ZIP 포맷TGZ 포맷)
2) 압축을 해제합니다. 압축이 풀린 디렉토리 아래에 'digist_lightbox'라는 디렉토리가 생겨있음을 확인하실 수 있습니다.
3) 서브디렉토리까지 모두 포함하여 digist_lightbox 디렉토리 내용 전부를 제로보드 XE의 Addons 디렉토리에업로드합니다. 예를 들어 zbxe라는 디렉토리에 제로보드가 설치되어 있다면 경로는 다음과 같습니다.(/zbxe/addons/digist_lightbox)
4) Admin 화면에 들어가서 애드온 메뉴를 누릅니다. 적합하게 설치되었다면 "DIGIST 라이트박스 활성화 애드온"이라는 애드온이 목록에 출력될 것입니다. 애드온을 활성화 시키기 위하여 "사용"상태로 만들어 주십시오.

사용방법


- 이 애드온은 게시판/블로그 모듈에서 테스트 되었습니다. 다른 모듈에서의 정상적인 작동을 보증할 수 없습니다.
- 이 애드온은 기본적으로 XE로 구동되는 전 사이트의 모든 모듈 인스턴스(mid)들에 일괄적용됩니다. 그러나 애드온의 세부설정을 통하여 애드온의 작동방식을 바꿀 수 있으므로 반드시 참조링크의 "세부설정"을 참조해주십시오.
- 이 애드온은 90%이상 클라이언트쪽에서 구동됩니다. 서버에서 문자열 치환등을 하지 않습니다.
- 이 애드온은 인터넷 익스플로러 6, 인터넷 익스플로러 7, 파이어폭스, 오페라 9에서 테스트 되었습니다.


※ 이 애드온은 XE 0.2.6 버전의 이미지 축소루틴의 오류 수정본을 적용하였습니다. 이 애드온을 쓰지 않고 해당 오류를 수정하기 위해서는 SVN으로 최신개발버전을 받으시기 바랍니다.

Q. 사진이 축소되어 나오는 것이 싫습니다. 이전 버전처럼 동작하게 하려면 어떻게 하나요?
A. 애드온 디렉토리 아래의 lytebox/lytebox.js 파일을 에디터로 엽니다. 이 파일의 58번째 줄을 보시면 this.autoResize = true; 라고 되어 있는데 이것을 this.autoResize = false; 로 변경하시면 이전 버전과 동일하게 동작합니다.

※ 이전 버전의 사용자분도 기존 설치 디렉토리를 지우고 다시 설치하시기를 권장합니다.
※ 애드온이 이상작동을 일으키면 캐시재생성을 해주시기 바랍니다.
※ 이 애드온은 XE 0.2.6 버전의 이미지 축소루틴의 버그(사진을 여러개 올렸을때 두번째 이후의 이미지는 리사이즈 되지 않는 문제)를 수정하여 적용하였습니다. 이 애드온을 쓰지 않고 해당 오류를 수정하기 위해서는 SVN으로 최신개발버전을 받으시기 바랍니다. (TRAC에서 common/js/common.js 파일만 받으시면 됩니다.)

※ 이 애드온은 xe_blog과 xe_list, 그리고 개인적으로 만들어 쓰는 스킨에서 테스트하였습니다.


(아마도) 알바트로스 이후 본문의 내용을 HTML안에 표시하는 방법이 확장되었습니다. xe의 기본 resize루틴이나 본 프로그램의 루틴이나 해당 마크업을 참조하여 재구성하므로 오래전에 만든 스킨은 호환이 되지 않을수 있음에 유의하시기 바랍니다.

특히, $oDocument->getContent(false) <- 이 방식으로 출력하는 스킨의 경우엔 본 애드온이 작동되지 않습니다. 만일 $oDocument->getContent(false)를 사용하여 스킨을 만드신 경우에는 <div class="document_{$oDocument->document_srl}_{$oDocument->getMemberSrl()}">$oDocument->getContent(false)</div>로view_document.html부분의 코드를 변경하셔야 합니다.

답글
2007.11.24 04:25:36
포인트:435point (53%), 레벨:2/30비밀얌

정말 좋네요 감사합니다. 혹시 이런식으로 게시물에 링크 주소를 클릭하면 라이트 박스로 홈페이지를 열어주는 기능도
가능한가요? 팝업원도우 보다 이런게 너무 깔끔하고 이뻐서요. 예전에 ajax 코드를 이용하여 링크 주소를 홈페이지 안에서 열어보게 한적이 있었는데 그건 링크 하나하나 다 코드 넣어줘야 실행이되서요.

이 댓글을..
답글
2007.11.24 09:09:59
포인트:1625point (72%), 레벨:4/30베니
사실 이미 가능합니다.

<a href=""> 안에 rel="lyteframe"을 추가해주시면 자동으로 연결됩니다.

자동으로 이걸 만들어주는건 생각 좀 해보겠습니다. 다 좋은데 괜히 사이즈만 커지는게 아닌가 싶어서요. 게다가 라이트박스로 링크를 출력하면 사이즈를 일일히 다이나믹하게 바꿔줄수도 없는데다가 골치아픈 문제가 좀 있습니다.
게다가 링크된 사이트의 작동상태를 보증하기 어려워집니다. (만일 lightbox 플러그인을 쓰는 사이트를 안에 또 열면.... 작동 제대로 안할겁니다. 아마도)

조금 수고스러우실 수도 있습니다만 rel="lyteframe"이라고 써서 쓰시는걸 권장하고 싶네요.