portfolio
숫자 카운팅 방식의 슬라이드형 섬네일 M
0
공유하기
고도몰 플랜의 상품 리스트의 기본 섬네일 이미지는 움직임이 없는 고정이미지로 출력됩니다.
많은 패션 관련 의류 어플리케이션을 보면 섬네일 이미지 여러장을 손으로 넘겨서 볼 수 있도록 UI를 제공하고 있습니다.
고도몰에서도 마찬가지로 튜닝을 통해 상세 페이지에 접근하지 않고 리스트 페이지에서 섬네일 여러장을 넘겨가며 미리보기하는 기능을 제작하였습니다.
ex) 예를 들어 총 9장의 상세 이미지를 관리자에서 등록하였다면 섬네일 영역에는 1/9 로 현재 슬라이드 상태를 출력하고 미리보기 기능을 제공합니다.
※ 상품 상세 페이지에서도 마찬가지로 슬라이드형태로 제작하였으며 상태 번호도 마찬가지로 동일하게 출력하였습니다. (추가튜닝)
※ 또한 사용자가 리스트 섬네일의 미리보기를 인지하지 못하는 경우를 대비해 화면 접속시 2개의 제품에는 섬네일이 좌우로 한 번씩 움직이는 모션동작을 주었습니다.
쇼핑몰 상품 리스트페이지 : 섬네일에 상세 이미지 미리보기
- 섬네일 미리보기 슬라이드 동작은 모바일에서는 손으로 쓸어넘겨 확인이 가능하며 PC 에서는 마우스의 휠을 이용해 슬라이드가 동작합니다.
쇼핑몰 상세페이지 : 섬네일 미리보기 슬라이드
고도몰 관리자 페이지 상품 등록/수정 상세이미지 등록화면
댓글 0개
댓글을 불러오는 중입니다.
친절한 개발자에게
무엇이든 물어보세요
1
숫자 카운팅 방식의 슬라이드형 섬네일 M