Masonry, Samrtphoto를 이용한 갤러리 스킨 > 그누보드5 스킨

그누보드5 스킨

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

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

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

첨부파일

gnuboard-masonry-gallery-skin.zip (118.4K) 17회 다운로드 2021-10-12 12:12:43 포인트 차감5
테스트한 버전5.4.13.1
호환 가능 버전5.3 이상

본문

- 갤러리 화면

 

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로, 피드백 및 문의는 댓글로 부탁드립니다!

추천
12

댓글 전체

전체 2,069 |RSS
그누보드5 스킨 내용 검색

회원로그인

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