| site_link1 | https://mdbootstrap.com/docs/standard/extended/gallery/ |
|---|---|
| site_link2 | https://uicookies.com/bootstrap-image-gallery/ |
| site_link3 | https://codepen.io/luiquecruz/pen/VVqEow |
다음은 site link1 에서 free 로 배포하는 부트스트랩 갤러리 예제들에 대한 분석 내용이다.
예제들중 상품 전시에 적용해볼만한 내용들을 추려보았다.
하지만 인기가 있을것 같은 템플릿은 MDB Pro를 구매해야 한다고 유도한다.
디자인 참고만 하자.
- Video carousel
> 짧은 영상으로 아이템을 직관적으로 관찰 할 수 있게 한다.
> 사용자가 영상을 업로드하면 짤방으로 변환하여 저장후 출력하면 좋을 것 같다.
- Gallery with modals and YouTube videos
> 아이템을 영상으로 촬영한다면 아이템의 상태를 판단하는데 매우 유용하고 관찰자가 매우 신뢰할 수 있다.
> 카메라로 촬영한 영상을 서버에 업로드하면 저장된 사용자의 유튜브 정보로 영상을 유튜브의 개인저장소에 업로드후 이를 갤러리 카드에 연결할 수 있다.
- eCommerce gallery
> 아이템의 상태를 근접으로 관찰 할 수 있게 한다.
- Full page gallery
> 전체페이지로 출력된 이미지로 가시성을 높여준다.
- Lightbox
> 동일한 카테고리 분류로 묶은 아이템들을 한꺼번에 열람하기 편한 UI를 제공한다.
> 아이템을 클릭하면 모달을 띄워 이미지를 좀더 크게 보여준다.
> 모달창에서 좌우 슬라이드로 이미지를 변경해가며 관찰 할 수 있다.
- Advanced multi-item carousel
> 아이템을 클릭하면 전체 사이즈의 모달이 떠서 가시성이 높고 좌우 슬라이드로 이미지를 바꿔가며 관찰하는게 편리하다.
이외에 sitelink2는 순수하게 이미지를 감각적인 사진 전시장으로 표현하는데 좋은 템플릿들이고
sitelink3 는 js, css 프레임웍을 전혀 사용하지 않은 순수 css 만으로 심플하게 출력하는 갤러리 샘플 코드이다.
