Masonry, Samrtphoto를 이용한 갤러리 스킨 정보
갤러리 Masonry, Samrtphoto를 이용한 갤러리 스킨관련링크
첨부파일
테스트한 버전5.4.13.1
호환 가능 버전5.3 이상
본문
- 갤러리 화면
- 이미지 클릭시 나오는 사진
Masonry.js를 사용해서 pinterest 디자인처럼 구현하였고, smartphoto.js를 이용하여서 이미지를 클릭시에 사진 슬라이드가 나오도록 하였습니다.
기능
- 이미지가 pinterest디자인에서 4개의 column으로 이루어져 있습니다.
- 이미지를 클릭하면 smartphoto library처럼 이미지가 크게 보이고, 좌우로 넘길 수 있습니다.
- 관리자로 로그인을 한 뒤에 이미지를 클릭하면 제목, 내용을 수정할 수 있습니다,
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
12
댓글 전체
좋은 스킨 감사합니다.
PS. 218라인에 </div> 추가
PS. 218라인에 </div> 추가
감사합니다^^ div는 추후에 수정해서 재업로드 하겠습니다ㅎㅎ
모바일에서는 사진을 보다가 다시 리스트로 가려면 어떻게해야하나요..ㅜㅜ?
사진에서 아래로 스와이프를 하면 리스트로 나가집니다!
아!! 그렇군요 ㅎㅎ 감사합니다!
좋은스킨이네요^^
감사합니다ㅎㅎ
좋은 스킨 공개해 주셔서 감사합니다.
좋은 스킨 감사합니다
감사합니다
감사합니다.
감사합니다. 잘쓸께요.
5.3버전에는 적용이 안되는건가요?
Thank you.
엣지 잘됨. 크롬 클릭시 view로들어가짐
한번 써보고 싶어 다운받았습니다. ㄳㅇ
와우 대단히 고맙습니다... 꼭 필요했던 갤러리 표현인데 초보라서 많이 배우고 있습니다.^^
감사합니다.
너무 이뻐요~