애드온 프로그램 자료실
| 라이센스 | LGPL |
|---|---|
| 기타 라이센스 | |
| 적용 버전 | 정식버전(1.0이후) |
특징
- 이 애드온은 본문에 삽입된 이미지를 아래의 라이브러리를 이용해서 보여주는 애드온입니다.
- 이 애드온에는 Greybox, Highslide, Lightbox, Lytebox 라이브러리가 포함되어 있습니다.
- 한번에 하나의 라이브러리만 사용 가능하며 사용 설정은 '환경설정'에서 변경 가능 합니다.
- 클라이언트 상에서 자바스크립트를 이용해 처리되므로 서버 부하는 거의 없습니다.
- 이미지 전체가 아닌 컨텐츠 내의 이미지만 체크하도록 이미지 리사이즈 함수를 개선하였습니다. (아래의 '사용방법 - 환경설정 - 본문 고유 아이디' 를 참고하세요.)
- Lytebox 는 Highslide 와 같이 이미지가 큰 경우 최대 브라우저 창 크기로 보여줍니다.
단점은 확대가 안됩니다. -_-
다운로드
기타 설명
- 이 애드온에 포함된 자바스크립트 라이브러리의 라이센스는 각 라이브러리 개발자에게 있습니다다.
- 따라서, 이 애드온을 이용하여 상업적인 사이트를 구축할 경우, 해당 개발자가 제시하는 라이센스를 참고하셔서 구입하시기 바랍니다.
- 개인적인 용도로 사용할 경우 개발자가 제시하는 내용을 지키는 한도 내에서 무료로 사용할 수 있습니다.
- 다른 이미지 뷰어 애드온과 함께 사용하지 마세요.
사용 라이브러리 및 스크린샷
스크린샷은 아래 사이트에서 확인하시길 바랍니다.
- 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/ (본문내 이미지를 리사이즈 해주는 함수)
환경설정
- 제로보드를 루트가 아니라 다른 폴더에 설치했을 경우, activebox/js/ 폴더 안의 *.init.js 파일을 열어서 경로를 수정하면 됩니다.
환경설정 화면
기타
개인적으로 자바스크립트를 수정해야할 필요가 있을 경우, 상세한 사용방법에 대한 내용은 아래 사이트를 참고하세요.
[w] http://kais.tistory.com/40
![[레벨:7]](./modules/point/icons/default/7.gif "포인트:4855point (84%), 레벨:7/30"){kind=icon}
![[레벨:1]](./modules/point/icons/default/1.gif "포인트:155point (43%), 레벨:1/30"){kind=icon}
치타이거
우와! 추천한방날려요~
이거 제 홈페이지에 적용하고 싶은데요.
지금 제 홈페이지 게시판이 iframe 안에 게시판이 들어가 있어서 그런지
게시판이 들어가있는 iframe안에서 화면이 출력되는데요.
웹페이지 전체에서 js가 작동하게 하려면 어떻게 하면 되나요?
답변해주시면 감사하겠습니다~~
![[레벨:5]](./modules/point/icons/default/5.gif "포인트:2405point (74%), 레벨:5/30"){kind=icon}
![[레벨:4]](./modules/point/icons/default/4.gif "포인트:1575point (70%), 레벨:4/30"){kind=icon}
smico
저는 정식구매하고 사용할 예정입니다.
/modules/board/skins/xe_board/ 에 있는 view_document.html 에 상기와 똑같이 입력했습니다.
그리고 애드온이 사용될 대상(모듈)을 지정했습니다.
그런데 관련 이미지를 클릭했는데 작동을 안합니다, 그다음 무엇을 해야합니까?
http://www.multiwindow.com/Korea_Homepage
포토 뉴스, 회사 포토 갤러리 등이 적용된 대상입니다.
smico
js init 파일을 해당 경로에 맞게 설정하는 방법을 모르겠습니다, 좀 알려 주세요!!
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;
smico
여기 http://vikjavev.no/highslide/ 페이지에 있는 "Examples" 의 Highslide JS core 와 Highslide HTML extension 처럼 메인페이지 http://www.multiwindow.com/Korea_Homepage 에 똑같이 적용 할려면 어떻게 하면 됩니까?
현재 게시판에서는 작동을 하고 있습니다, 그러나 제가 원하는것은 메인페이지에 적용할려고 합니다, 도와 주세요!
![[레벨:3]](./modules/point/icons/default/3.gif "포인트:1355point (94%), 레벨:3/30"){kind=icon}
Dustwo
그건 자바스크립트로 동적으로 할수도 있겠으나, 스킨에서 해당 링크를 수정해 주는게 더 효율적이겠죠.
- 레이아웃에서 아래 파일을 추가해줍니다. (아래 순서대로)
보통은 게시판 애드온 사용을 켜두면 레이아웃에도 추가가 되는데, 애드온 사용하지 않고 해당 라이브러리를 쓰려면 따로 추가하면 됩니다.
/addon/activebox/lib.highslide/highslide.css
/addon/activebox/lib.highslide/highslide-with-html.packed.js
/addons/activebox/js/highslide.init.js - 레이아웃 본문에 아래 <DIV> 레이어를 추가해 줍니다.
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
<a href="#" class="close" onclick="return hs.close(this)" title="Close"></a></div> - 최신글 스킨과 게시판의 겔러리 스킨에서 섬네일의 링크에 아래 코드를 추가해주세요.
{@ $uploaded_list = $document->getUploadedFiles()}<a href="{$uploaded_list[0]->download_url}"
id="thumb1" class="highslide" onclick="return hs.expand(this)"><img src="..." /></a>
id 값은 고유해야 하므로 id="list_thumb{$no}" 또는 id="latest_thumb{$no}" 등과 같은 형식으로 적으면 됩니다.
은진아빠
멋진 스크립트 감사합니다. 그런데.. 그래픽을 본문에 삽입했을때 바꿔주는 것도 좋지만.. 기본적으로 갤러리 형태로 만들어질수 있도록 에디터에 버튼을 넣을 수 있다면 좋겠네요. 멋진 효과가 그래픽의 엄청난 길이에 그냥 압도되어 버리네요. 그리고 본문에 삽입된 이미지가 창보다 크거나 본문넓이를 초과할 경우에.. 라이트박스든 그레이박스든 그냥 크~게 나와버려서 좀 난감합니다.
![[레벨:2]](./modules/point/icons/default/2.gif "포인트:730point (90%), 레벨:2/30"){kind=icon}
우유가짱
에디터컴포넌트의 Gallery기능과 연동이 안되나요?,,;;
모든갤러리가 슬라이드로 구성이 되는게아니고,, 작은사이즈는 구성이 안되네요,,;;
gallery기능과 같이 써서 모든 슬라이드를 표현하고 싶은데,,,
smico
해당사이트에서 다운로드받아 그냥 설치하고 아이프레임으로 하니까 팝업창이 안뜨고 안에서만 작동합니다.
도와 주시면 감사하겠습니다
http://www.multiwindow.com/Korea_Homepage/
하단 사이트맵 바로위에 있습니다
이것은 http://www.multiwindow.com/example-no-border.html 정상적으로 작동합니다.
Lightbox2를 사용하려고 하는데
닫기 이미지인 close 가 엑박으로 나타나네요?
그리고, 상단여백이 너무 많이 띄어서 나타나는데 이걸 좁히고 싶습니다.
어딜고쳐야 하나요?
감사합니다.
Dustwo
감사합니다. :)
제로보드XE를 설치한 경로가 루트가 아니고 다른 폴더일 경우 따로 파일에서 경로를 수정해주셔야 합니다.
/addons/activebox/js/lightbox2.init.js
파일을 열어서 경로를 현재 설치한 경로에 맞게 적어주세요.
상단여백이라고 하셨는데 어떤 여백인지 모르겠네요. 이미지와 페이지 상단과의 거리라면 정상적인것입니다. 이 경우 이미지가 열릴때 현재 보는 페이지를 기준으로 해서 열립니다. 현재 페이지의 중간쯤을 보고 있을때 이미지를 눌러 보게되면 중간쯤에서 이미지가 보여지게 됩니다. 이건 다른 라이브러리에서도 마찬가지 입니다.
이미지 보게될 경우 테두리의 두께를 말하는 거라면 CSS 와 js/lightbox2.init.js 파일에서 테두리를 수정하는 것으로 줄일 수 있습니다.
css나 이미지파일을 개인적으로 수정해서 사용해도 괜찮을까요?