이 애드온은 제작자 블로그에서도 다운로드 받으실 수 있습니다. (작동예제)

19일 3시 40분경 0.9.1로 업데이트 하였습니다. 변경된 사항은 설정을 하지 않고 그냥 사용했을때 초기값 셋팅 문제로 인하여 스크립트 에러가 나는 것으로 0.9를 이상없이 사용하시는 분들께서는 구지 업데이트 하지 않으셔도 상관은 없습니다.

알려진 문제점:
' 카운터 타입'을 '모든 링크 보여짐'으로 설정해두고 너무 많은 사진이 본문에 포함되어 있을 때 링크가 전부 표시되지 않는 문제가 있습니다. 이 문제는 제가 근시일내에 해결하기 어려우니 '라이트 박스 형태'로 설정하여 사용하시거나 그냥 사용해주시면 감사하겠습니다.

이 애드온은 현재 제로보드 XE 1.0.3에서 테스트되었습니다. 현재 이 애드온의 버전은 0.9이며 1.0.3 이전의 XE 릴리즈에서는 정상적으로 작동되지 않음을 유의바랍니다.

digist_shadowbox_0.9.jpg

이 애드온은 기존 라이트박스 애드온 0.7.2의 업그레이드 판입니다만 사용 라이브러리를 Lytebox 3.2.2에서 마이클 J. I. 잭슨씨의 ShadowBox라는 라이브러리로 교체함에 따라서 이름도 함께 변경되었습니다. 아울러 사용법이 크게 변화하였기 때문에 기존의 라이트박스 애드온을 사용하신 분께서도 본 설명을 정독하여 주시면 감사하겠습니다.

다운로드

ZIP 포맷
TAR.GZ 포맷

설치방법

1) 만일 기존에 'DIGIST 라이트박스 애드온'을 사용하고 계셨던 분께서는 일단 addons 디렉토리에 있는 digist_lightbox를 삭제해주시기 바랍니다. (그냥 기능을 끄시는 것으로도 충분합니다.)
2) 첨부된 파일을 다운로드 받습니다.
3) 압축을 해제합니다. 압축이 풀린 디렉토리 아래에 digist_shadowbox라는 디렉토리가 생겨있음을 확인하실 수 있습니다.
4) 서브디렉토리까지 전부 포함하여 digist_shadowbox 디렉토리 내용 전부를 제로보드 XE의 Addons 디렉토리에 업로드합니다. 예를 들어 zbxe라는 디렉토리에 제로보드가 설치되어 있다면 본 애드온의 설치 경로는 다음과 같습니다. - /zbxe/addons/digist_shadowbox/
5) Admin 화면에 들어가서 애드온 메뉴를 클릭합니다. 제대로 설치되었다면 "DIGIST 쉐도우박스 활성화 애드온"이라는 애드온이 목록에 출력됩니다. 애드온을 활성화시키기 이전에 resize_image 애드온(본문내 이미지 조절 애드온)을 비활성화시킵니다.
6) 이제 'DIGIST 쉐도우박스 활성화 애드온'을 활성화시킵니다. 만일 이미 XE를 사용중이라면 캐시를 재생성합니다.

사용방법

- 이 애드온은 게시판(또는 블로그 스킨)에서 사용가능합니다. 페이지 모듈에서는 작동되지 않습니다.
- 이 애드온은 기본적으로 XE로 구동되는 모든 사이트의 모든 모듈 인스턴스(mid)에 일괄적용됩니다. 그러나 애드온의 세부설정을 통하여 애드온의 작동방식을 변경할 수 있습니다. 자세한 내용은 본 문서의 하단에 있는 '세부설정'을 참고해 주십시오.
- 이 애드온은 90%이상 클라이언트에서 구동됩니다. 아울러 서버의 내용을 변경시키지 않습니다.
- ShadowBox는 핫키를 지원합니다. (P/왼쪽화살표: 이전 사진, N/우측화살표: 다음 사진, ESC/C: 끄기)
- 이 애드온은 인터넷 익스플로러 6.0/7.0, 파이어폭스 2, 오페라 9, 사파리 2에서 테스트되었습니다.(IE 6에서는 애니메이션 기능을 사용했을때 다소 애니메이션에 문제가 발생될 수 있음에 유의하여 주십시오.)

세부설정

정 읽기 싫으시면 그냥 쓰셔도 됩니다.

shadowbox_setup.jpg

XE 관리자 메뉴의 애드온 설정화면에서 본 애드온의 '설정' 버튼을 클릭합니다.

갤러리용 모듈: 갤러리용 모듈은 본문에 포함된 모든 이미지에 쉐도우박스(라이트박스)를 적용하는 것입니다. 일반적으로 사진 게시판이나 사진 중심의 블로그에서 사용하시기 적합합니다. (예제)

사용테마: 검은색과 흰색 테마가 있습니다. 흰색은 기존의 라이트박스와 매우 흡사합니다만 사소한 차이가 존재합니다.

대형이미지 처리방법: 매우 큰 이미지가 로딩되었을때 쉐도우박스(라이트박스)가 어떻게 동작할지를 설정합니다. (기존버전에서는 js파일을 고쳐야 했습니다만...) 리사이즈/드래그 모드 둘 중 하나를 선택하시길 권장합니다.

캡션선택: 기본적으로 이미지에 연결된 'alt'속성으로부터 값을 가져옵니다. 하지만 일반적인 사용자들은 'alt'를 제대로 설정하지 않는 경우가 대부분이기 때문에 '본문의 제목'을 가져와서 뿌리는 방식을 추가로 지원합니다.(기본은 alt를 그냥 읽어오도록 되어 있습니다. 일반적인 경우 XE의 정책상 alt는 파일이름이 되는 경우가 많습니다.)

이미지 표시 애니메이션 사용: 사진이 나오는 애니메이션을 끄고 켭니다. 기본적으로 이 기능은 켜져있으나 이 기능은 일부 브라우저, 그리고 사용 라이브러리에서 호환성 문제를 일으키는 것 같습니다. 선택은 본인의 자유입니다. (IE6에서 애니메이션이 조금 흉하기는 하지만 사진이 보여지는데에는 아무 문제를 일으키지 않습니다.)

카운터타입: 화면은 좌측 하단에 표시되는 이미지 카운터를 어떻게 그릴것인지 설정합니다. 기존의 라이트 박스처럼 "1 of 20" 같은 형식을 선호하신다면 기본값을 그대로 쓰시면 됩니다. '모든 링크 보여짐' 옵션을 선택하면 일반적으로 1~10개 사이의 이미지를 브라우징하는데 있어서 훨씬 편한 기능을 제공하게 됩니다만 이미지의 갯수가 너무 많을때엔 렌더링 오류가 발생합니다.(브라우징에는 전혀 문제없으므로 취향에 따라 설정하시기 바랍니다.)

이미지링크: 이미지의 본래 링크를 보여줄지 말지 설정합니다. 이미지 링크는 제목에 연결됩니다. 기본으론 출력되지 않습니다.

사용라이브러리: (고급사용자용) 만일 jQuery, Ext JS, YUI, Prototype, Dojo, Mootools등의 라이브러리를 사용하고 계신다면 중복 로딩을 막기위한 추가 설정을 합니다. 기본적으로 digist_shadowbox는 jQuery 압축판(YUI Compressor)을 사용중입니다. 만일 jQuery 라이브러리를 이미 링크해서 사용중이거나 다른 크로스 브라우징 라이브러리를 사용중인 경우엔 사용라이브러리 설정을 꼭 해주시기 바랍니다. (주의: 이 기능은 제가 일일히 테스트해보지 못했습니다. Mootools의 경우엔 버전에 따라서 에러가 발생하는 것 같습니다.)

그밖의 이 애드온에 대한 문의는 편의상 제 블로그에서 댓글이나 글로 받겠습니다. 감사합니다. (금주 주말부터 다음주 수요일까지 해외출장이기 때문에 응답이 늦어질 수 있음에 유의해 주십시오.)
이 게시물을..