Help Center
카페24 소식
[스마트디자인] 상품상세페이지의 이미지 확대보기 기능 스크립트
2012-04-18
안녕하세요, 카페24 운영도우미 입니다.
상품 상세 페이지에서 상품 이미지를 마우스 오버 했을때
확대된 이미지를 볼 수 있는 기능이 적용되었습니다.
자세한 내용은 아래를 참조해 주세요.
1. 제목 : 상품상세페이지의 이미지 확대보기 기능 스크립트
2. 업데이트 내용
1) 설정하기
'쇼핑몰어드민 > 상점관리 > 상점운영 관련 설정 > 상점운영방식 설정 >
상품이미지 부분 확대 보기 스크립트' 부분을 사용함으로 체크 하여야 활성화 됩니다.
2) HTML 수정
기존 product_detail 모듈에 추가 되었으며, 표준스킨에서는 아래와 같이 파란색 소스부분의
태그를 추가해줍니다.
- 수정할 파일 : /product/detail.html
- 추가할 태그 : <div id="zoom_wrap"></div>
<!-- 상세정보 내역 --> <div id="prdInfo"> <h3>[{$product_code}] {$name} <span>{$soldout_icon} {$recommend_icon} {$new_icon} {$mileage_icon} {$product_icons}</span> </h3> <p class="{$delvtype_display|display}">({$eng_name}) 해외배송 가능</p> <table border="1" summary="{$name} 기본 정보입니다."> <caption>{$name} 기본 정보</caption> <tbody> <tr class="{$product_price_display|display}"> <th scope="row">판매가</th> <td> <strong id="span_product_price_text" class="{$product_price_class}">{$product_price}</strong> {$txt_product_price}</td> </tr> ………………… <tr module="product_addoption"> <th>{$add_option_name}</th> <td>{$form.add_option}</td> </tr> </tbody> </table>
<!-- 상세정보 내역 --> <div id="prdInfo"> <h3>[{$product_code}] {$name} <span>{$soldout_icon} {$recommend_icon} {$new_icon} {$mileage_icon} {$product_icons}</span> </h3> <p class="{$delvtype_display|display}">({$eng_name}) 해외배송 가능</p> <table border="1" summary="{$name} 기본 정보입니다."> <caption>{$name} 기본 정보</caption> <tbody> <tr class="{$product_price_display|display}"> <th scope="row">판매가</th> <td> <strong id="span_product_price_text" class="{$product_price_class}">{$product_price}</strong> {$txt_product_price}</td> </tr> ………………… <tr module="product_addoption"> <th>{$add_option_name}</th> <td>{$form.add_option}</td> </tr> </tbody> </table> <div module="product_multioption"> <div class="{$multiple_option_template_class}"> <table border="1" summary="옵션 추가"> <caption>옵션 추가</caption> <tbody> <tr module="product_option"> <th scope="row">{$option_name}</th> <td>{$form.option}</td> </tr> ………………………… <div module="product_multioption"> <div class="{$multiple_option_template_class}"> <table border="1" summary="옵션 추가"> <caption>옵션 추가</caption> <tbody> <tr module="product_option"> <th scope="row">{$option_name}</th> <td>{$form.option}</td> </tr> ………………………… |
3) CSS 수정
- 수정파일 : /css/module/product/detail.css
.xans-product-detail #prdInfo { position:relative; float:right;width:372px; padding:0 0 30px;} #image_zoom_small { display:none; position:absolute; z-index:999; background:#fff; border:1pxsolid #aaa; filter:alpha(opacity=50);opacity:0.5; } #zoom_wrap { position:absolute; z-index:100px; top:0; left:0; } .image_zoom_large { position:absolute; z-index:999; width:350px; height:350px; overflow:hidden; background:#fff; border:1pxsolid #aaa; } .image_zoom_large .image_zoom_large_relative { position:relative; } .image_zoom_large .image_zoom_large_relative #zoom_image { position:absolute; z-index:99;}
▼ 적용예제
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]