치에님 버젼 바탕으로 LightBox 적용한 갤러리 정보
갤러리 치에님 버젼 바탕으로 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 입니다.
추천
18
18
댓글 전체

좋은자료 감사합니다. 라이트박스는 next버튼 클릭시 점선 안나오게 하려고 해봤는데 어렵더라구요^^
너무 멋집니다. 멋진 스킨을 공개해주셔서 감사합니다. 그런데 이전사진과 다음사진의 버튼이 안 나타나는데 설정방법이 있나요. 아니면 저만 안되나요..다시 해보니 잘되네요. 감사합니다.

havana님 / 너무 예민하세요 ㅋㅋㅋ. 막연한 생각으로는 lightbox.css 에서 링크 관련된 부분을 수정하거나 추가해주면 되지 않을까 생각하고 있습니다.
션션션님 / css 에서 스킨경로변수를 쓸 수가 없어서 생긴 문제인데요. bbs 폴더에 images 를 카피하시면 나옵니다. css 에서 스킨경로를 받아올 수 있는 방법이 있으면 참 좋겠네요. php 하고 css 둘 사이에 변수 전달하는 방법을 몰라서요 ^^;
션션션님 / css 에서 스킨경로변수를 쓸 수가 없어서 생긴 문제인데요. bbs 폴더에 images 를 카피하시면 나옵니다. css 에서 스킨경로를 받아올 수 있는 방법이 있으면 참 좋겠네요. php 하고 css 둘 사이에 변수 전달하는 방법을 몰라서요 ^^;

lightbox.js에서 링크부분에 objPrevLink.onfocus = function() { this.blur(); }하니 되네요.
션션션님 이전|다음 버튼은 lightbox.css에 버튼 링크부분이 ../images/nextlabel.gif 이렇게 되어있다면 ../를 삭제하면 잘나와요.
션션션님 이전|다음 버튼은 lightbox.css에 버튼 링크부분이 ../images/nextlabel.gif 이렇게 되어있다면 ../를 삭제하면 잘나와요.
지금 테스트해봤는데 좋네요..
그런데 한가지 질문해도 되나요^^;;;...
뷰 페이지 새창에서 요부분--> " Image 1 of " 제목으로 또는 로그같은것 넣고 싶은데 할려면 어디 수정하나요?
감사합니다.
그런데 한가지 질문해도 되나요^^;;;...
뷰 페이지 새창에서 요부분--> " Image 1 of " 제목으로 또는 로그같은것 넣고 싶은데 할려면 어디 수정하나요?
감사합니다.

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 짜신 분은 천재같습니다.
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 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 나옵니다.
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 나옵니다.

좋은갤러리
친절하신분이네요....잘~되네요^^,,,
추천합니다.
감사합니다...
추천합니다.
감사합니다...

리스트에서 샘네일 화일이 안보이는건 왜일까요?

청도골프님 / 서버세팅 문제일 수 있겠습니다. 확장자 .thumb 이 이미지파일이라고 세팅해 주셔야 되겠습니다. IIS 에서는 MIME 매핑으로 세팅하는데 아파치면 모르겠네요. 흠.. 호스팅 받으시는 분이면 회사에서 문의해야 되는 것인가요. 아니면 썸네일 확장자를 jpg 로 하셔야겠습니다. ^^ 혹여 또 이 문제가 아니라면 권한 문제일 수 있으니깐 707 이나 777 로 주시면 되지 않을까 하네요.

수고하셧씁니다~!

질문계시판에 해야 되는데 계속 이쪽에 물어 보게 되네요..
확장자를 jpg로 하려면 어떻게 해야 될까요?
확장자를 jpg로 하려면 어떻게 해야 될까요?

청도골프님 / 우선은 .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 를 한번 더 붙이세요. ^^
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 를 한번 더 붙이세요. ^^

감사합니다. 근데 원인을 찾았습니다. 찾고 보니 너무 허탈해서 셈네일 가로세로 폭을 안좋서 그러더군요. ㅡㅡ
관리자모드에서 얼렁 수정했는데 됬습니다.
다시 한번 좋은 스킨 공개해 주셔서 감사합니다.
관리자모드에서 얼렁 수정했는데 됬습니다.
다시 한번 좋은 스킨 공개해 주셔서 감사합니다.

좋습니다. 개인적으로 메뉴네비게이션이 더 마음에 드네요 ^^ CSS로 만든건가요?

마루T님 / EuDock 이라는 스크립트인데 2.0 까지 공개되어 있습니다. 다만 2.0 은 그누 sideview.js 와 충돌하니 이전 버젼을 사용하시면 좋겠네요.

이것참 언제까지 진화 하나.. ^^
감사 합니다.
감사 합니다.
감사합니다.

초보가 질문드립니다.
view 화면에서 틀이 깨지는 현상이 일어나는데요..
그리고 사진을 클릭하면 엑박이 먼저뜨고 사진이 나옵니다.
view 화면에서 틀이 깨지는 현상이 일어나는데요..
그리고 사진을 클릭하면 엑박이 먼저뜨고 사진이 나옵니다.

메빅맨님/ 'images 폴더'를 '/bbs' 에 카피해 주시면 엑박 뜬 이미지가 보이실 겁니다.
와우, 멋지네요.
-0- 공개해 주셔서 감사합니다
목록에서 썸네일을 클릭하고 view화면으로 들어가면 게시판 폭이 확장되어 테이블이 깨집니다.
잘 모르지만 원인을 찾은 듯 싶긴 한데 맞는건지....
view.skin.php 파일을 열어보시면, 대충 77번째 줄 부근에 <div align="center"><div style="width:700px"> 이 보입니다.
위 부분에서는 width 값을 100%로 바꿔주시거나, div를 삭제하셔도 될 것 같습니다.(저는 삭제하고 쓰는 중입니다....)
정확한 수정이 맞는지는 모르겠네요...
잘 모르지만 원인을 찾은 듯 싶긴 한데 맞는건지....
view.skin.php 파일을 열어보시면, 대충 77번째 줄 부근에 <div align="center"><div style="width:700px"> 이 보입니다.
위 부분에서는 width 값을 100%로 바꿔주시거나, div를 삭제하셔도 될 것 같습니다.(저는 삭제하고 쓰는 중입니다....)
정확한 수정이 맞는지는 모르겠네요...

비상하는별님 / view.skin.php 파일에서 <div align="center"><div style="width:700px"> 이 부분은 뷰화면에서 테이블을 안깨지도록 하는 겁니다. 지우시면 아마 사진이 한 줄로 출력되지 않을까 생각됩니다. 뷰화면에서 게시판 폭이 확장되는 것은 아마 썸네일 크기가 700px 넘어서지 않나 생각되네요.
좋은 소스 고맙습니다.
원더풀입니다 ^o^
오호, 멋집니다.
담아봅니다. 기대되는군요.
썸네일 출력시에요, 클릭수를 옆에 출력할수있는 방법은 없을까요?
와우 감사합니다. 멋진데요 ^^
제가 찾던 바로 이것입니다.
우와 정말 대단하고 감사드려요 !!
우와 정말 대단하고 감사드려요 !!
고맙습니다~ :)
고맙습니다.
홈에 아래에있는 메뉴는 어떻게 하는건가요 ^^;
홈에 아래에있는 메뉴는 어떻게 하는건가요 ^^;
굿
정말 이쁘네요.....
잘쓸게요 ㅋ
너무 감사해요~
잘쓸게요 ㅋ
너무 감사해요~

감사합니다.
백경동님 view화면에서 150*150 사진을 클릭하면 새창나와야하는데...
본 페이지에 해당사진만 한장 나타납니다...
새창으로 나올려면 뭘 수정해야하나요??@~@;
images 폴더를 /bbs에 넣었습니다.
2. lightbox.css 에 있는 이미지 경로가 스킨경로로 지정이 문제인가요?
어떻게 해야하는지..ㅡㅜ;;
본 페이지에 해당사진만 한장 나타납니다...
새창으로 나올려면 뭘 수정해야하나요??@~@;
images 폴더를 /bbs에 넣었습니다.
2. lightbox.css 에 있는 이미지 경로가 스킨경로로 지정이 문제인가요?
어떻게 해야하는지..ㅡㅜ;;
좋군요 잘쓸게요~~
감사히 사용하겠습니다 :)

멋지네요...잘사용하겠습니다.^^
감사합니다^^
우왓 멋진 겔러리 게시판이네여...추천꽝
내용도 밑에 조금 나오게 하려면 어찌.....
아 ..내용은 필요 없겠네여...^^
초보라서 그런데, 썸네일 이미지 사이즈도 수정 가능하겠죠?
http://yjscompany.com/board/bbs/board.php?bo_table=chapter_4
저는 엑박이 뜨네요-ㅅ- 어떻게 된 일일까요!! 너무 놓치고 싶지 않은 게시판입니다!!!
저는 엑박이 뜨네요-ㅅ- 어떻게 된 일일까요!! 너무 놓치고 싶지 않은 게시판입니다!!!
내용도 넣구 싶은데 제작자님 홈페이지는 내용이 나오던데 저는 안 나오네요^^; 어떻게 설정하죠?

잘쓸께요.

좋아요 ^^
잘쓰겠씁니당당당 ^^
이렇게 뜨는데요
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
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째줄에서 직접 바꿔줘야 적용이 되네요.
list.skin.php 7째줄 에서 변경이 아니라.. 저는 4째줄에서 직접 바꿔줘야 적용이 되네요.
치에님 버젼 바탕으로 LightBox 적용한 갤러리
고맙습니다. 이런 귀한자료를!!
정말 좋습니다..아주 잘 되요~ ^____^
제로보드로 홈페이지 만들다가.
그누보드 첨 써서..막히는 게 정말 많은데,,이건 무리없이 잘 되네요
초보자 관점에서도 정말 굿입니다..
당신은 멋쟁이~ 유후후후~ ~ ~
제로보드로 홈페이지 만들다가.
그누보드 첨 써서..막히는 게 정말 많은데,,이건 무리없이 잘 되네요
초보자 관점에서도 정말 굿입니다..
당신은 멋쟁이~ 유후후후~ ~ ~
멋진게시판
관리자모드에서 어떻게 섬네일 사이즈 지정하나요 저도 엑박으로 뜨네요 ㅡㅜ
^^
5
감사...


