치에님 버젼 바탕으로 LightBox 적용한 갤러리
치에님 갤러리 디자인과 곱슬최씨님 뷰어부분의 아이디어를 바탕으로 갤러리를 수정하였습니다.
갤러리는 약간의 환경설정이 필요하기 때문에 순서대로 말씀드리겠습니다.
<그림 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 입니다.
갤러리는 약간의 환경설정이 필요하기 때문에 순서대로 말씀드리겠습니다.
<그림 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 입니다.
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누4 스킨
5,847건스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.
댓글 63개
션션션님 / css 에서 스킨경로변수를 쓸 수가 없어서 생긴 문제인데요. bbs 폴더에 images 를 카피하시면 나옵니다. css 에서 스킨경로를 받아올 수 있는 방법이 있으면 참 좋겠네요. php 하고 css 둘 사이에 변수 전달하는 방법을 몰라서요 ^^;
션션션님 이전|다음 버튼은 lightbox.css에 버튼 링크부분이 ../images/nextlabel.gif 이렇게 되어있다면 ../를 삭제하면 잘나와요.
그런데 한가지 질문해도 되나요^^;;;...
뷰 페이지 새창에서 요부분--> " Image 1 of " 제목으로 또는 로그같은것 넣고 싶은데 할려면 어디 수정하나요?
감사합니다.
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 짜신 분은 천재같습니다.
구체적을 알려주시면 안될까요..시간이 되시면요..
// 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();
}
}
);
},
답변주셔서 감사합니다...
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 나옵니다.
추천합니다.
감사합니다...
확장자를 jpg로 하려면 어떻게 해야 될까요?
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 를 한번 더 붙이세요. ^^
관리자모드에서 얼렁 수정했는데 됬습니다.
다시 한번 좋은 스킨 공개해 주셔서 감사합니다.
감사 합니다.
view 화면에서 틀이 깨지는 현상이 일어나는데요..
그리고 사진을 클릭하면 엑박이 먼저뜨고 사진이 나옵니다.
잘 모르지만 원인을 찾은 듯 싶긴 한데 맞는건지....
view.skin.php 파일을 열어보시면, 대충 77번째 줄 부근에 <div align="center"><div style="width:700px"> 이 보입니다.
위 부분에서는 width 값을 100%로 바꿔주시거나, div를 삭제하셔도 될 것 같습니다.(저는 삭제하고 쓰는 중입니다....)
정확한 수정이 맞는지는 모르겠네요...
우와 정말 대단하고 감사드려요 !!
홈에 아래에있는 메뉴는 어떻게 하는건가요 ^^;
잘쓸게요 ㅋ
너무 감사해요~
본 페이지에 해당사진만 한장 나타납니다...
새창으로 나올려면 뭘 수정해야하나요??@~@;
images 폴더를 /bbs에 넣었습니다.
2. lightbox.css 에 있는 이미지 경로가 스킨경로로 지정이 문제인가요?
어떻게 해야하는지..ㅡㅜ;;
저는 엑박이 뜨네요-ㅅ- 어떻게 된 일일까요!! 너무 놓치고 싶지 않은 게시판입니다!!!
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
list.skin.php 7째줄 에서 변경이 아니라.. 저는 4째줄에서 직접 바꿔줘야 적용이 되네요.
제로보드로 홈페이지 만들다가.
그누보드 첨 써서..막히는 게 정말 많은데,,이건 무리없이 잘 되네요
초보자 관점에서도 정말 굿입니다..
당신은 멋쟁이~ 유후후후~ ~ ~