Help Center
카페24 소식
[모바일쇼핑몰] 상품상세 이미지 터치시 자동 확대/축소 기능 안내
2014-07-02
안녕하세요, 카페24 운영도우미 입니다.
모바일 쇼핑몰의 상품상세에 있는 이미지를 터치하면 크게 확대하였다가, 자동으로 축소되는 기능이 추가되었습니다.
자세한 내용은 아래를 참조해 주세요.
---------------------------------------------------------------------------------------------------
■ 적용일자 : 2014-07-02 (수)
■ 업데이트 내용
상품이미지를 보다 자세하고 편리하게 확인할 수 있도록, 이미지를 터치하면 크게 확대하여 이미지를 위에부터
아래까지 자동으로 내린 후 원본 사이즈 이미지로 돌아가는 기능이 추가되었습니다.
단, 자동 확대/축소 기능은 상품상세정보 위치를 '상품상세' 화면으로 변경한 몰에서만 이용 가능합니다.
상품 상세정보 위치변경 공지 : 기존상세정보 위치변경 공지 보러가기
※ 소스 적용 방법
- 위치 : 어드민 > 모바일쇼핑몰 > 스마트편집창
1. 상품(product) > 상품상세 (detail.html)
▼ 소스수정 (파란글씨 추가)
|
## 상단 생략 ## <div module="product_additional"> <!--@css(/css/module/product/additional.css)--> <!--@css(/css/module/product/additional_pop.css)--> <!--@js(/js/module/product/additional_pop.js)--> </div> ## 하단 생략 ## |
2. CSS > 모듈(module) > 상품(product) > additional_pop.css 화면추가
▼ 화면 추가 방법
▼ 추가소스
|
.animate { -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes pop { 10% { -webkit-transform-origin:50% 50%; -webkit-transform: rotate(5deg);} 25% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(50px); } 90% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(-30px); } 100% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1,1); } }
@-moz-keyframes pop { 10% { -webkit-transform-origin:50% 50%; -webkit-transform: rotate(5deg);} 25% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(50px); } 90% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(-30px); } 100% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1,1); } }
@-o-keyframes pop { 10% { -webkit-transform-origin:50% 50%; -webkit-transform: rotate(5deg);} 25% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(50px); } 90% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(-30px); } 100% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1,1); } }
@keyframes pop { 10% { -webkit-transform-origin:50% 50%; -webkit-transform: rotate(5deg);} 25% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(50px); } 90% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1.87,1.87) translateY(-30px); } 100% { -webkit-transform-origin:50% 50%; -webkit-transform: scale(1,1); } }
.pop { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: pop; -moz-animation-name: pop; -o-animation-name: pop; animation-name: pop; } |
3. JS > 모듈(module) > 상품(product) > additional_pop.js 화면추가
▼ 추가소스
|
$(function(){ var sModule = '.xans-product-additional', $pop = $(sModule).find('img');
// set pop image $pop.each(function(i){ $(this).data('index', i).css('z-index', '100'); });
$pop.click(function(){ var _index = $(this).data('index'); $pop.each(function(i){ if (i != _index) { $(this).css("z-index", "100").removeClass(); } else { $(this).css("z-index", "9999"); $(this).removeClass().delay(1).queue(function (a) { $(this).addClass("animate pop"); a(); $(this).dequeue(); }); } }); }); }); |
■ 적용화면
---------------------------------------------------------------------------------------------------
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]