Swiper 갤러리 게시판 (폴더/DB) > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

Swiper 갤러리 게시판 (폴더/DB) 정보

갤러리 Swiper 갤러리 게시판 (폴더/DB)

첨부파일

swiper_gallery.zip (125.6K) 125회 다운로드 2019-01-02 15:22:17 포인트 차감100

본문

swiper 갤러리 게시판입니다.

 

게시판 데모사이트 : http://suu.kr/bbs/board.php?bo_table=free

=> g5_boad_file에 등록된 이미지만 출력

 

폴더 이미지 갤러리 : http://suu.kr/test/image_view.php

=> 특정 폴더의 모든 이미지 출력. (작업중 페이지...)
=> 폴더 전용 이미지 갤러리 소스파일은 추후에 팁게시판에 등록 예정입니다.

 

###########################
2019-01-02  15:30 추가 및 수정 내용
###########################

1. g5_board_file 테이블 및 폴더에서 이미지 정보 가져오는 배열정보가 변경되었습니다.
   게시판에 등록된 이미지 정보 전체를 배열로 받아오는데 메모리절약을 위해 꼭 필요한 글번호(wr_id), 이미지번호(bf_no), 이미지파일(bf_file)등 3가지 정보만 배열로 받아옵니다.
   이미지에 속한 글에대한 제목, 내용, 사진에 대한 Exif 정보는 슬라이드로 사진이 선택할때마다 ajax로 정보를 받아옵니다.
   g5_board_file 테이블에서 5만개의 이미지정보를 배열로 받아올 경우 약 28M, 10만개는 약 54M 정도의 메모리가 추가로 필요합니다.
   (wr_id는 글수가 많을 수록 자릿수가 늘어남)

 

2. 사진촬영정보를 볼수 있도록 하였고 버튼을 클릭하여 숨기거나 보이도록 하였습니다.
   촬영정보중 추가로 다른 항목을 더 보이게 하려면 exif_info.php 파일을 수정해주시면 됩니다.

 

3. 본문내용을 표시 하였습니다. (버튼을 클릭하여 숨기거나 보이도록 하였습니다.)
   본문내용은 200글자까지만 표시되며, 클릭하여 모든 내용을 레이어창으로 볼 수 있습니다.

 

4. 제목을 클릭하여 글내용을 볼 수 있도록 하였고, "자세히보기" 버튼을 클릭하면 새창으로 본문 내용을 볼 수 있습니다.

 

5. 현재 보고 있는 사진의 페이지 숫자에 가까운 색인번호가 하이라이트됩니다.

 

6. DB와 폴더중 선택하는 부분이 변경되었습니다.
 
   lilst.skin.php 파일을 열어 13라인쯤에 아래의 내용을 수정합니다.
   $db_use = "Y"; //DB 사용시 'Y', 폴더 사용시 'N' 구분 주의.
   DB사용시에는 "Y", 폴더 사용시에는 "N"

 

   폴더 사용시에는 추가로 아래의 내용을 수정하셔야 합니다.
   수정할 부분은 22~24 라인며, 갤러리로 사용할 폴더명으로 수정해주시면 됩니다.

 

   $img_file_url = G5_URL."/test_img"; // 이미지 파일 URL, 마지막에 '/' 제외하세요.
   $img_file_path = G5_PATH."/test_img"; // 이미지 파일 패쓰, 마지막에 '/' 제외하세요.
   $files = dir_files($img_file_path, 'desc'); //디렉토리에 있는 파일선택


############################# 수정끝

 

1. Swiper : https://idangero.us/swiper/api/
2. 페이지 전환없이 게시판에 등록된 모든 이미지를 볼 수 있습니다.
3. 이미지는 에디터가 아닌 일반 파일업로드로 g5_board_file 테이블에 등록된 파일만 볼 수 있습니다.
   (에디터로 등록된 모든 이미지를 보는 기능은 적용되지 않았습니다.)
4. 이미지 바로가기 색인기능이 있어 빠른 이미지 탐색이 가능합니다. (30개마다  색인)
5. 특정 폴더의 전체 이미지를 볼 수 있습니다. 
    (g5_board_file 테이블과 폴더중 선택하여 사용 가능)
6. 스크립트, CSS를 분리하지 않고 list.skin.php 파일에 모두 포함되었습니다.

 

 

# 특정폴더의 이미지를 불러오는 기능으로 사용시는 아래와 같이 두가지만 수정하세요.

 

1. lilst.skin.php 파일을 열어 105~106라인의 디렉토리 경로를 수정.
    $img_file_url = G5_URL."/data/file/".$bo_table; // 이미지 파일 URL, 마지막에 '/' 제외하세요.
    $img_file_path = G5_PATH."/data/file/".$bo_table; // 이미지 파일 패쓰, 마지막에 '/' 제외하세요.

 

2. 107~108라인의 주석 수정 (아래처럼 변경)
    $files = dir_files($img_file_path, 'asc'); //디렉토리에 있는 파일선택
    //$files = db_Files($bo_table); // 게시판파일 테이블에서 선택

 

 

- 작동원리 및 수정시 주의 사항.

페이지 접속시 총 10장의 사진이 로드되며 Swiper loop 기능으로 인하여  2개의 div요소가 추가 생성되면서 총 12개의 div 요소가 생성됩니다.

총 12개의 DIV에서 모든 사진이 순차적으로 로드됩니다.

 

12개의 div중 첫번째는 10번째 div 복제용이고, 12번째는 두번째 div 복제용입니다.
우측에서 좌측으로 슬라이드시 div index 순서는  2-3-4-5-6-7-8-9-10-11-2 순서입니다.
좌측에서 우측으로 슬라이드시 div index 순서는  9-8-7-6-5-4-3-2-1-0-9 순서입니다.
div index는 0부터 11입니다.

 

현재 선택된 사진이 6번이고 7번으로 슬라이드시 10번에 새로운 사진이 로드됩니다.
6번에서 5번으로 슬라이드시  3번에 새로운 사진이 로드되는 구조입니다.
화면에 보여지지 않는 요소에서 미리 사진을 불러오기 때문에 끊김 없는 사진을 볼 수 있습니다.

실질적으로 사용되는 10개의 div 요소때문에 색인번호기능의 대표 숫자가 5, 35, 45,..형태로 정해졌습니다.
그리고, div의 index 1번은  1번, 11번, 21번...,... 이 위치해야 됩니다. 

예를 들어  색인번호 65번을 클릭하면 61 ~ 70번까지의 사진이 로드되면서 65번의 사진이 선택되어 집니다.


색인번호 클릭시에는 무조건 10장의 사진이 불러와집니다.

색인번호의 초기값은 5부터 시작하여 30번째마다 생성되어지고 화면에는 35, 65, 95...로 되어 있습니다.
50번째마다 변경하고 싶다면... list.skin.php 파일 14번째줄 "$i = $i + 30;" 숫자만 30을 50으로 변경해주시면 됩니다.

화면에는 5, 55, 105... 로 표시됩니다.

 

사진에 포함된 현재 페이지 정보는 다음 로드되는 사진의 인덱스를 결정하는 번호입니다.
잘 모르시는분은 페이지 표시부분은 수정하지 마시길.. 권장합니다.

 

폴더나 DB에서 자료를 생성시 둘다 배열로 생성되나....
순서가 매우 중요하기 때문에 배열생성시 key값은 0부터 시작하여야 되면 연속된 번호가 되어야 합니다.
배열쪽 수정하실분들은 참고해주세요.

 

궁금한 사항이 있으신분은 댓글로 남겨주시면 답변 드리도록 하겠습니다.

- 좌우 슬라이드 넘김 화살표 클릭시 간헐적으로 반대 방향으로 작동되는 오류가 있습니다.

- 마우스로 드래그하거나 모바일에서 손으로 밀어서 넘길시에는 오류 없습니다.

 

추천
14

댓글 전체

혹시 그누M에는 적용이 안될까요? 너무 좋은 스킨이라 그누M에서 수정중인데 G5변수 수정은 끝났는데 안되어서 어떤 부분을 추가로 수정해야 될까여?ㅠㅠ
그누M을 사용하지 않아서 확실하지는 않지만 그누M에 맞게 수정하시면 사용가능할겁니다. F12 개발자 모드에서 오류 확인하면서 하나씩 수정해보세요~~  어디에서 어떤 오류인지 확인할 수 없어서 정확한 답변드리기 어렵습니다~
정말 멋진 갤러리 게시판이라서 이리 보고 저리보고...
근데 색인번호를 특정 번호로 지정할수는 없는가요?  가령 1페이지 30 페이지 54페이지 등등 특정 번호로 바로 갈수 있게.. 그리고 번호마다 이름을 지정할수도 있을까요?
1990년 1991년 ---  2019년 이런식으로.. 년도별로 사진 나오게 하고 싶어서.
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT