치에님 버젼 바탕으로 LightBox 적용한 갤러리 > 그누4 스킨

그누4 스킨

스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y
그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.

치에님 버젼 바탕으로 LightBox 적용한 갤러리 정보

갤러리 치에님 버젼 바탕으로 LightBox 적용한 갤러리

첨부파일

dangsgallery.zip (248.7K) 1035회 다운로드 2007-08-31 23:28:20

본문

치에님 갤러리 디자인과 곱슬최씨님 뷰어부분의 아이디어를 바탕으로 갤러리를 수정하였습니다.
갤러리는 약간의 환경설정이 필요하기 때문에 순서대로 말씀드리겠습니다. 

<그림 1> 부분은 갤러리 리스트 부분입니다.
1. 리스트 부분은 DQ엔진을 사용하여 썸네일을 생성합니다. DQ엔진은 설치경로에 문제없게 스킨 경로를 지정하는 변수를 사용하였습니다.
2. list.skin.php 파일에서 코드 7번째 줄 &mod 를 수정하시면 가로 이미지 갯수를 정하실 수 있습니다.
3. list.skin.php 파일에서 코드 16~17번째 줄이 DQ엔진 설정 부분이며 썸네일 생성 방법을 결정할 수 있습니다.
4. 썸네일 사진 크기 설정은 관리자 모드에서 입력해 주세요. 가장 이뻐보이는 썸네일 크기는 가로 300, 세로 100 입니다.

<그림 2> 는 사진을 클릭해서 들어간 뷰어 부분입니다.
1. 가로 150, 세로 150 사이즈로 썸네일을 생성합니다.
2. 썸네일 사진 크기는 view.skin.php 파일에서 코드 5~6번째 줄에 있습니다.

<그림 3> 은 lightbox 적용된 결과입니다.
1. 사진을 클릭하면 라이트박스로 큰 이미지를 보실 수 있습니다.
2. lightbox.css 에 있는 이미지 경로가 스킨경로로 지정이 안되는 문제가 조금 있습니다. images 폴더를 /bbs 에 카피해 주시면 엑박 뜬 이미지가 보입니다.

갤러리의 특징은
1. 한 눈에 전체 사진이 보일 것
2. 사진을 클릭하면 큰 사진이 보일 것
3. 다음 사진도 연속해서 볼 수 있을 것
이라는 모토로 이리저리 조합해 보았습니다. 이쪽 전공이 아니라 많은 분들의 코드를 참고하였으며 이에 보답하고자 공개하게 되었습니다. 좋은 하루 되세요. ^^

적용 사례는 http://gdbaek.net/bbs/board.php?bo_table=gallery 입니다.
추천
18
  • 복사

댓글 전체

션션션 자기소개 아이디로 검색 회원게시물 07.09.01 00:09:36
너무 멋집니다. 멋진 스킨을 공개해주셔서 감사합니다. 그런데 이전사진과 다음사진의 버튼이 안 나타나는데 설정방법이 있나요. 아니면 저만 안되나요..다시 해보니 잘되네요. 감사합니다.
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.01 00:25:35
havana님 / 너무 예민하세요 ㅋㅋㅋ. 막연한 생각으로는 lightbox.css 에서 링크 관련된 부분을 수정하거나 추가해주면 되지 않을까 생각하고 있습니다.
션션션님 / css 에서 스킨경로변수를 쓸 수가 없어서 생긴 문제인데요. bbs 폴더에 images 를 카피하시면 나옵니다. css 에서 스킨경로를 받아올 수 있는 방법이 있으면 참 좋겠네요. php 하고 css 둘 사이에 변수 전달하는 방법을 몰라서요 ^^;
havana 자기소개 아이디로 검색 회원게시물 07.09.01 02:26:40
lightbox.js에서 링크부분에 objPrevLink.onfocus = function() { this.blur(); }하니 되네요.
션션션님 이전|다음 버튼은 lightbox.css에 버튼 링크부분이 ../images/nextlabel.gif 이렇게 되어있다면 ../를 삭제하면 잘나와요.
브미 자기소개 아이디로 검색 회원게시물 07.09.01 09:49:02
지금 테스트해봤는데 좋네요..
그런데 한가지 질문해도 되나요^^;;;...
뷰 페이지 새창에서 요부분--> " Image 1 of  " 제목으로 또는 로그같은것 넣고 싶은데 할려면 어디 수정하나요?
감사합니다.
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.01 10:30:44
havana님 / 저도 그렇게 수정하겠습니다, 멋지십니다 >_<. 수정하시는 분들을 위해서 자세히 적어봅니다.
lightbox.js 파일에서 코드 272-275줄에서 275줄 아래에  objPrevLink.onfocus = function() { this.blur(); }
                            코드 277-280줄에서 280줄 아래에  objNextLink.onfocus = function() { this.blur(); }
를 추가해주시면 사진 클릭시 점선이 사라집니다.

브미님 / lightbox.js 파일에서 코드 510~513째 줄에 Image 1 of .. 으로 표기하는 부분이 있는데요. setInnerHTML 함수로 글은 넣을 수 있지 싶습니다. 어찌나 함수가 많은지 lightbox 짜신 분은 천재같습니다.
브미 자기소개 아이디로 검색 회원게시물 07.09.01 11:15:44
까만것은 글씨인데..^^;;;
구체적을 알려주시면 안될까요..시간이 되시면요..

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
}

new Effect.Parallel(
[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
  new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ],
{ duration: resizeDuration, afterFinish: function() {
// update overlay size and update nav
var arrayPageSize = getPageSize();
Element.setHeight('overlay', arrayPageSize[1]);
myLightbox.updateNav();
}
}
);
},


답변주셔서 감사합니다...
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.01 11:25:00
브미님 / 이미지를 부르는 부분이 구현되어 있어 보입니다만, 원하는 부분에 딱 붙이는 방법은 코드를 좀 더 살펴봐야지 싶네요. 다만 단순하게 글은 입력하실 수 있습니다, >_<.
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
}

여기에서
    Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);  를
    Element.setInnerHTML( 'numberDisplay', "Photo by gdbaek "); 이런식으로 수정하시면
이미지에서 Photo by gdbaek 나옵니다.
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.01 13:58:30
청도골프님 / 서버세팅 문제일 수 있겠습니다. 확장자 .thumb 이 이미지파일이라고 세팅해 주셔야 되겠습니다. IIS 에서는 MIME 매핑으로 세팅하는데 아파치면 모르겠네요. 흠.. 호스팅 받으시는 분이면 회사에서 문의해야 되는 것인가요. 아니면 썸네일 확장자를 jpg 로 하셔야겠습니다. ^^ 혹여 또 이 문제가 아니라면 권한 문제일 수 있으니깐 707 이나 777 로 주시면 되지 않을까 하네요.
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.01 14:20:55
청도골프님 / 우선은 .thumb 파일이 생성되는가부터 확인하신 후 아래 작업을 하셔야 될 듯 합니다.
1. list.skin.php 파일에서 코드 87째줄을 수정하시면 되겠습니다.
  $thumbimg="$g4[path]/data/file/$bo_table/img_" . $list[$i][wr_id].".thumb";
  맨 끝에 .thumb 확장자가 붙겠죠? 알맞게 수정하시거나 추가를 해서 thumb 에 jpg 를 한번 더 붙이세요. ^^
2. view.skin.php 파일에서 코드 86째줄을 수정하시면 되겠습니다.
  $thumbimg="$g4[path]/data/file/$bo_table/img_" . $view[file][$i][file].".thumb";
  맨 끝에 .thumb 확장자가 붙겠죠? 알맞게 수정하시거나 추가를 해서 thumb 에 jpg 를 한번 더 붙이세요. ^^
청도골프 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.01 14:42:19
감사합니다. 근데 원인을 찾았습니다. 찾고 보니 너무 허탈해서  셈네일 가로세로 폭을 안좋서 그러더군요. ㅡㅡ
관리자모드에서 얼렁 수정했는데 됬습니다.
다시 한번 좋은 스킨 공개해 주셔서 감사합니다.
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.02 22:50:14
마루T님 / EuDock 이라는 스크립트인데 2.0 까지 공개되어 있습니다. 다만 2.0 은 그누 sideview.js 와 충돌하니 이전 버젼을 사용하시면 좋겠네요.
메빅맨 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.04 10:30:06
초보가 질문드립니다.

view 화면에서 틀이 깨지는 현상이 일어나는데요..

그리고 사진을 클릭하면 엑박이 먼저뜨고 사진이 나옵니다.
비상하는별 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.09 01:29:24
목록에서 썸네일을 클릭하고 view화면으로 들어가면 게시판 폭이 확장되어 테이블이 깨집니다.
잘 모르지만 원인을 찾은 듯 싶긴 한데 맞는건지....
view.skin.php 파일을 열어보시면, 대충 77번째 줄 부근에 <div align="center"><div style="width:700px"> 이 보입니다.
위 부분에서는 width 값을 100%로 바꿔주시거나, div를 삭제하셔도 될 것 같습니다.(저는 삭제하고 쓰는 중입니다....)
정확한 수정이 맞는지는 모르겠네요...
백경동 홈페이지 자기소개 아이디로 검색 회원게시물 07.09.10 20:21:08
비상하는별님 / view.skin.php 파일에서 <div align="center"><div style="width:700px">  이 부분은 뷰화면에서 테이블을 안깨지도록 하는 겁니다. 지우시면 아마 사진이 한 줄로 출력되지 않을까 생각됩니다. 뷰화면에서 게시판 폭이 확장되는 것은 아마 썸네일 크기가 700px 넘어서지 않나 생각되네요.
나니아 자기소개 아이디로 검색 회원게시물 08.02.14 04:25:28
백경동님 view화면에서 150*150 사진을 클릭하면 새창나와야하는데...
본 페이지에 해당사진만 한장 나타납니다...
새창으로 나올려면 뭘 수정해야하나요??@~@;


 images 폴더를 /bbs에 넣었습니다.
2. lightbox.css 에 있는 이미지 경로가 스킨경로로 지정이 문제인가요?
어떻게 해야하는지..ㅡㅜ;;
대진인테리어 자기소개 아이디로 검색 회원게시물 08.04.04 18:19:42
이렇게 뜨는데요

select count(*) as cnt from g4_point where mb_id = 'admin' and po_rel_table = 'daezin' and po_rel_id = '1' and po_rel_action = '쓰기'

1267 : Illegal mix of collations (euckr_korean_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation '='

error file : /gnuboard4/bbs/write_update.php
초절정섹시가이 자기소개 아이디로 검색 회원게시물 09.01.06 15:08:12
정말 좋습니다..아주 잘 되요~ ^____^
제로보드로 홈페이지 만들다가.
그누보드 첨 써서..막히는 게 정말 많은데,,이건 무리없이 잘 되네요
초보자 관점에서도 정말 굿입니다..

당신은 멋쟁이~ 유후후후~ ~ ~
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로