특징

• 이 애드온은 본문에 삽입된 이미지를 아래의 라이브러리를 이용해서 보여주는 애드온입니다.
• 이 애드온에는 Greybox, Lightbox, Highslide 라이브러리가 포함되어 있습니다.
• 한번에 하나의 라이브러리만 사용 가능하며 사용 설정은 '환경설정'에서 변경 가능 합니다.
• 클라이언트 상에서 자바스크립트를 이용해 처리되므로 서버 부하는 거의 없습니다.
• 이미지 전체가 아닌 컨텐츠 내의 이미지만 체크하도록 이미지 리사이즈 함수를 개선하였습니다. (아래의 '사용방법 - 환경설정 - 본문 고유 아이디' 를 참고하세요.)
• Lytebox 는 Highslide 와 같이 이미지가 큰 경우 최대 브라우저 창 크기로 보여줍니다.
  단점은 확대가 안됩니다. -_-

추가설명

• 이 애드온에 포함된 자바스크립트 라이브러리의 라이센스는 각 라이브러리 개발자에게 있습니다다.
• 이 애드온을 이용하여 상업적인 사이트를 구축할 경우, 해당 개발자가 제시하는 라이센스를 참고하셔서 구입하시기 바랍니다.
• 개인적인 용도로 사용할 경우 개발자가 권하는 내용을 지키는 한도 내에서 무료로 사용할 수 있습니다. (Highslide 의 경우 Highslide 의 링크를 노출해야 합니다.)
• 다른 이미지 뷰어 애드온과 함께 사용하지 마세요.

다운로드

- 새로 설치시 0.1.3 -

activebox.v0.1.3.for.zbxe.zip

- 0.1b ~ 0.1.2 에서 0.1.3 로 업데이트시 -

activebox.v0.1.3-patch.for.zbxe.zip

사용 라이브러리 및 스크린샷

• Greybox : http://orangoo.com/labs/GreyBox/
• Highslide : http://vikjavev.no/highslide/
• Lightbox2 : http://www.lokeshdhakar.com/projects/lightbox2/
• Lytebox : http://www.dolem.com/lytebox/
• Resize-image : http://www.zeroboard.com/

사용방법 - 초기화 하기

1. Greybox - js/greybox.init.js - Greybox 초기화 파일
   

   //Greybox 라이브러리가 위치한 경로를 적어주세요.(절대/상대 상관 없음)
   var GB_ROOT_DIR = '/addons/activebox/lib.greybox/';

   
   
2. Highslide - js/highslide.init.js
   

   //remove the registerOverlay call to disable the controlbar
   hs.registerOverlay(
      {
         thumbnailId:null,
         overlayId:'controlbar',
         position:'top right',
         hideOnMouseOut:true
      }
   );
   //이미지 파일이 있는 경로를 적어주세요.
   hs.graphicsDir = '/addons/activebox/lib.highslide/images/';
   //Tell Highslide to use the thumbnail's title for captions
   hs.captionEval = 'this.thumb.title';
   hs.outlineWhileAnimating = true;

   
   이 외에 다른 설정을 하려면, Highslide API 문서를 참고하세요.
   　
3. Lightbox2 - js/lightbox2.init.js
   fileLoadingImage, fileBottomNavCloseImage 에 이미지 파일의 경로를 설정하세요.
   

   LightboxOptions = Object.extend({
       fileLoadingImage:'/addons/activebox/lib.lightbox2/images/loading.gif',
       fileBottomNavCloseImage:'/addons/activebox/lib.lightbox2/images/closelabel.gif',
       overlayOpacity:0.8,// controls transparency of shadow overlay
       animate:true,//리사이즈시 애니메이션 여부
       resizeSpeed:7,//이미지 리사이즈 속도 (1=가장느림 ~ 10=가장빠름)
       borderSize:10,//안 여백
       //여러 이미지 볼 경우 하단에 표기되는 메시지: Image # of #.
       // Change it for non-english localization
       labelImage: "Image",
       labelOf: "of"
   }, window.LightboxOptions || {});

   
   이 외에 다른 설정을 하려면, Lightbox API 문서를 참고하세요.
   　
4. Lytebox - js/lytebox.init.js
   

   function LyteBox() {
     /*** Start Global Configuration ***/
     // themes: grey (default), red, green, blue, gold
       this.theme = 'grey';
     // controls whether or not Flash objects should be hidden
       this.hideFlash = true;
     // controls whether to show the outer grey (or theme) border
       this.outerBorder = false;
     // controls the speed of the image resizing (1=slowest and 10=fastest)
       this.resizeSpeed = 10;
     // higher opacity = darker overlay, lower opacity = lighter overlay
       this.maxOpacity = 80;
     // 1 = "Prev/Next" buttons on top left and left (default),
     // 2 = "<< prev | next >>" links next to image number
       this.navType = 1;
     // controls whether or not images should be resized if larger than the browser window dimensions
       this.autoResize = true;
     // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
       this.doAnimations = true;
     // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
       this.borderSize = 12;
   /*** End Global Configuration ***/
   
   /*** Configure Slideshow Options ***/
     // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
       this.slideInterval = 5000;
     // true to display Next/Prev buttons/text during slideshow, false to hide
       this.showNavigation = true;
     // true to display the Close button, false to hide
       this.showClose = true;
     // true to display image details (caption, count), false to hide
       this.showDetails = true;
     // true to display pause/play buttons next to close button, false to hide
       this.showPlayPause = true;
     // true to automatically close Lytebox after the last image is reached, false to keep open
       this.autoEnd = true;
     // true to pause the slideshow when the "Next" button is clicked
       this.pauseOnNextClick = false;
     // true to pause the slideshow when the "Prev" button is clicked
       this.pauseOnPrevClick = true;
   /*** End Slideshow Configuration ***/
   
     // 이하 내용은 설정과 무관하여 생략

사용방법 - 환경설정

• 사용할 라이브러리 : 그레이 박스(Greybox) 5.51, 하이 슬라이드(Highslide) 3.3.18, 라이트 박스(Lightbox) 2.04 중에서 사용할 라이브러리를 선택합니다.
  
• 본문 고유 아이디 : 빠른 이미지 처리를 위해 본문이 위치하는 DIV 객체의 아이디를 입력해 주세요.
  - 이 항목을 설정하지 않으면 페이지 내 모든 이미지를 체크하게 되므로 브라우저가 느려질 수 있습니다.
  - 사용하는 스킨의 view_document.html 파일에서 {$oDocument->getContent()} 가 위치한 곳의 DIV 객체 ID 를 입력해 주세요.
  - 만약, 없다면 설정 후 입력해 주세요.
  

  <!-- 예) DocumentContent 를 입력 -->
  <div id="DocumentContent" style="contentBody">
      {$oDocument->getContent()}
  </div>

  
  - 여러 아이디를 적을 경우 쉼표(,)를 이용해 적어주세요. (공백은 넣지 마세요.)
  
  예) DocumentContent,CommentContent
  
  
• 라이브러리를 이용하여 링크 열기 : Greybox, Highslide 를 사용할 경우, 웹페이지 링크를 해당 라이브러리를 이용하여 브라우저 내에서 'IFRAME'을 사용해 보여줍니다.
  - 이 기능은 이미지에 <A> 링크가 걸렸을 경우만 작동됩니다.
  - Lightbox 는 지원하지 않습니다. (Lightbox 를 사용할 경우 Lightbox Gone Wild 를 참고하세요.)
  
• 웹페이지 창의 크기 : 웹페이지 창을 사용할 경우 크기를 지정해주세요. 기본 크기는 650x500 입니다.
  - '너비x높이' 형태로 입력해주세요.

기타 버그나 건의사항

이 애드온은 클라이언트에서 자바스크립트를 이용해 동적으로 링크를 생성해 각 라이브러리를 사용할 수 있도록 하고 있습니다. 포함된 라이브러리를 제외한 코드는 가급적 호환되도록 작성되었지만 브라우저에 따라서 오류가 날 수 있습니다.
현재 이 애드온은 IE 6.0, IE 7.0, IE 8.0beta, FF 3.0 에서는 작동을 확인했습니다.

포함된 라이브러리가 해당 브라우저를 지원하는지 확인해보시고, 문제가 없다면 이곳에 리플로 버그 리포팅을 해주시면 수정을 하도록 하겠습니다.

수정사항

0.1.3　08-06-17

• 추가: Lytebox 라이브러리 ([w] http://www.dolem.com/lytebox/)
• 수정: Lytebox/lytebox.js - 설정 부분을 js/lytebox.init.js 로 옮김 [08-06-17]
• 수정: Lytebox/lytebox.js - getPixelRate() 수정

자세히

0.1.2　08-06-17

• 여러 객체에서 이미지 체크 처리루틴 추가
  본문 고유 아이디 지정시 한개만 처리되어 코멘트의 이미지가 리사이즈 되지 않는 문제

0.1b 　08-06-09

• 기초코드 작성
  
• 전체 이미지가 아닌 컨텐츠 내의 이미지만 체크로 속도향상
  
• <A> 테그가 없는 이미지 객체에 <A> 테그 생성