이전
목록
다음
흐아암

Masonry, Samrtphoto를 이용한 갤러리 스킨

흐아암
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2021-10-12 (화) 12:12:43 · 6758 · 20

링크

http://ksasac.site/bbs/board.php?bo_table=gallery_test (1311) https://github.com/jiwon79/gnuboard-masonry-gallery-skin (716)
화면 캡처 2021-10-12 121211.png

- 갤러리 화면

 

3743818469_1634008232.4231.png

- 이미지 클릭시 나오는 사진

 

Masonry.js를 사용해서 pinterest 디자인처럼 구현하였고, smartphoto.js를 이용하여서 이미지를 클릭시에 사진 슬라이드가 나오도록 하였습니다.

 

기능

  1. 이미지가 pinterest디자인에서 4개의 column으로 이루어져 있습니다.
  2. 이미지를 클릭하면 smartphoto library처럼 이미지가 크게 보이고, 좌우로 넘길 수 있습니다.
  3. 관리자로 로그인을 한 뒤에 이미지를 클릭하면 제목, 내용을 수정할 수 있습니다,

 

column의 수 및 margin을 바꾸고 싶은 경우

style.css
#bo_gall .gall_box {
  width: 23%;
  margin: 1%;
  position: relative;
}

#bo_gall .gall_sizer {
  width: 25%
}

 style.css의 #bo_gall .gall_box에서 margin과 이미지 크기를 조절하고, #bo_gall .gall_sizer에서 width를 조절해서 column수를 변경하면 됩니다.

 자세한 사용법 및 내용은 위의 github링크를 참고하시기 바랍니다.

 

소스코드 수정할 부분이 있으면 github의 pull & request로, 피드백 및 문의는 댓글로 부탁드립니다!

#반응형

버전 정보

테스트한 버전 5.4.13.1
호환 가능 버전 5.3 이상

첨부파일

화면 캡처 2021-10-12 121211.png (715.4 KB) 0회 2021-10-12 12:12 포인트 차감 5
gnuboard-masonry-gallery-skin.zip (118.4 KB) 227회 2021-10-12 12:12 포인트 차감 5
|

댓글 20개

sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-12 (화) 17:05:02
좋은 스킨 감사합니다.
PS. 218라인에 </div> 추가
흐아암
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-13 (수) 10:59:09
감사합니다^^ div는 추후에 수정해서 재업로드 하겠습니다ㅎㅎ
어느날우연이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-12 (화) 22:09:32
모바일에서는 사진을 보다가 다시 리스트로 가려면 어떻게해야하나요..ㅜㅜ?
흐아암
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-13 (수) 10:58:24
사진에서 아래로 스와이프를 하면 리스트로 나가집니다!
어느날우연이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-13 (수) 21:54:17
아!! 그렇군요 ㅎㅎ 감사합니다!
곤곤밥
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-13 (수) 10:28:11
좋은스킨이네요^^
흐아암
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-13 (수) 10:58:06
감사합니다ㅎㅎ
크크리스휘
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-14 (목) 01:06:32
좋은 스킨 공개해 주셔서 감사합니다.
숮숮
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-15 (금) 16:36:18
좋은 스킨 감사합니다
000123984
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-16 (토) 00:24:29
감사합니다
도도리MOM
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-19 (화) 07:43:02
감사합니다.
트트루아이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-27 (수) 19:39:59
감사합니다. 잘쓸께요.
designhere
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-29 (금) 14:07:57
5.3버전에는 적용이 안되는건가요?
ManLee
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-12-31 (금) 06:54:25
Thank you.
울라프
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-01-05 (수) 06:21:46
https://sir.kr/qa/444198?page=0&posting=ok&sst=wr_num

게시판에 자잘한 에러가 있어 질문 중입니다.
iintercue
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-04-02 (토) 10:23:50
엣지 잘됨. 크롬 클릭시 view로들어가짐
mhsma
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-05-19 (목) 01:49:53
한번 써보고 싶어 다운받았습니다. ㄳㅇ
시지프스의전설
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-06-08 (수) 20:52:14
와우 대단히 고맙습니다... 꼭 필요했던 갤러리 표현인데 초보라서 많이 배우고 있습니다.^^
넥스트123
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-07-24 (일) 17:52:11
감사합니다.
땅땅2
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-08-11 (금) 13:48:53
너무 이뻐요~
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

2,752건

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

태그 필터 (최대 3개) 전체 PC용 모바일용 반응형
+