[카페24쇼핑몰] 이미지 확대보기 팝업

티스토리 뷰

웹 코딩/cafe24 - PC디자인

[카페24쇼핑몰] 이미지 확대보기 팝업

nopinokio 2015. 4. 7. 19:02

[카페24쇼핑몰] 이미지 확대보기 팝업

<div module="Product_ZoomPackage">
    <!--@css(/css/module/product/zoomPackage.css)-->
    <!--@js(/js/module/product/product_image.js)-->
    <div class="header">
        <h1>확대보기</h1>
        <div class="close"><a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_close.png" alt="닫기" /></a></div>
    </div>
    <div class="content">
        <div module="product_zoom">
            <!--
                $popup_flag = T
             -->
            <!-- 이미지 영역 -->
            <div class="imgArea" >
                <div class="keyImg">
                    <!-- 공급사 바로가기버튼 영역 -->
                    <div class="topLogo {$supply_link_display|display}">
                        <span>{$supply_top_logo}</span>
                        {$supply_btn_go}
                    </div>
                    <!-- //공급사 바로가기버튼 영역 -->
                    <img src="{$big_img}" class="{$big_img_class}" alt="" onclick="self.close();" />
                    <span class="prev"><a href="#none" onclick="{$action_prev_product}" style="display:{$btn_prev_display};"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_prev.png" alt="이전 제품 보기" /></a></span>
                    <span class="next"><a href="#none" onclick="{$action_next_product}" style="display:{$btn_next_display};"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_next.png" alt="다음 제품 보기" /></a></span>
                </div>
                <!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
                <div class="listImg" module="product_addimage">
                    <ul>
                        <li>{$add_img}</li>
                        <li>{$add_img}</li>
                    </ul>
                </div><!-- //참고 -->
                <!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
                <div class="{$colorchip_display|display}">
                    <div class="color" module="product_Colorchip">
                        <span class="chips" style="background-color:{$color}"></span>
                        <span class="chips" style="background-color:{$color}"></span>
                    </div>
                </div>
                <!-- //참고 -->
            </div><!-- //이미지 영역 -->
            <!-- 상세정보 내역 -->
            <div class="infoArea">
                <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</div>
                <h3>{$name|cut:20} <span class="{$delvtype_display|display}">(해외배송 가능상품)</span></h3>
                <div module="product_detaildesign">
                    <!--
                        출력 갯수 지정 변수, 없으면 설정된 전체가 나옵니다.
                        count = 10
                    -->
                    <table border="1" summary="">
                        <caption>{$name} 기본 정보</caption>
                        <tbody>
                            <tr class="{$item_display|display}">
                                <th scope="row">{$item_title}</th>
                                <td>{$item_content}</td>
                            </tr>
                            <tr class="{$item_display|display}">
                                <th scope="row">{$item_title}</th>
                                <td>{$item_content}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <table border="1" summary="">
                    <caption>SNS 상품홍보</caption>
                    <tbody>
                        <tr class="{$sns_display|display}">
                            <th scope="row">SNS 상품홍보</th>
                            <td class="social">{$facebook_icon} {$twitter_icon} {$me2day_icon}</td>
                        </tr>
                    </tbody>
                </table>
                <div id="zoom_wrap"></div>
                <p class="{$naver_mileage_exception_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/txt_naver.gif" alt="개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다." /></p>
                <!-- //상세정보 내역 -->
                <table border="1" summary="">
                    <caption>상품 옵션</caption>
                    <tbody>
                        <!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
                        <tr module="product_addoption">
                            <th scope="row">{$add_option_name}</th>
                            <td>
                                <span class="inputWrap">{$form.add_option}</span>
                                <span class="txtByte" title="현재글자수/최대글자수">(<strong class="length">0</strong>/{$option_maxlength})</span>
                            </td>
                        </tr>
                        <tr module="product_option">
                            <th scope="row">{$option_name}</th>
                            <td>{$form.option}</td>
                        </tr>
                        <tr module="product_fileoption">
                            <th scope="row">{$file_option_name}</th>
                            <td class="fileInfo">
                                {$form.file_option}
                                <ul class="infoDesc">
                                    <li>- 파일은 최대 5개까지 {$file_option_limit}M 이하로 개별업로드 가능합니다.</li>
                                    <li>- 동일상품이 장바구니에 있을 경우 현재 업로드 되는 파일로 교체됩니다.</li>
                                </ul>
                            </td>
                        </tr><!-- //참고 -->
                    </tbody>
                </table>
                <!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
                <p class="info {$limit_display|display}">(최소주문수량 {$minimum_limit}개 이상<span class="{$maximum_limit_display|display}"> / 최대주문수량 {$maximum_limit}개 이하</span>)</p>
                <!-- //참고 -->
                <!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
                <div class="productSet normal" module="product_setproduct">
                    <div class="product">
                        <div class="seperate">
                            <table border="1" summary="">
                                <caption>기본 정보</caption>
                                <tbody>
                                    <tr>
                                        <th scope="row">상품명</th>
                                        <td><strong>{$product_name}</strong> ({$set_quantity}개씩 구매되는 상품)</td>
                                    </tr>
                                    <tr class="{$product_price_display|display}">
                                        <th scope="row">판매가</th>
                                        <td class="price {$product_price_del}">{$product_price}</td>
                                    </tr>
                                    <tr class="{$product_sale_price_display|display}">
                                        <th scope="row">할인판매가</th>
                                        <td class="sale">{$product_sale_price}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="option">
                            <table border="1" summary="">
                                <caption>옵션 정보</caption>
                                <tbody>
                                <tr module="product_addoption">
                                    <th>{$add_option_name}</th>
                                    <td>
                                        <span class="inputWrap">{$form.add_option}</span>
                                        <span class="txtByte" title="현재글자수/최대글자수">(<strong class="length">0</strong>/{$option_maxlength})</span>
                                    </td>
                                </tr>
                                <tr module="product_option">
                                    <th>{$option_name}</th>
                                    <td>{$form.option}</td>
                                </tr>
                                <tr module="product_noneoption">
                                    <th>상품선택</th>
                                    <td>{$form.noneoption}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="product">
                        <div class="seperate">
                            <table border="1" summary="">
                                <caption>기본 정보</caption>
                                <tbody>
                                    <tr>
                                        <th scope="row">상품명</th>
                                        <td><strong>{$product_name}</strong> ({$set_quantity}개씩 구매되는 상품)</td>
                                    </tr>
                                    <tr class="{$product_price_display|display}">
                                        <th scope="row">판매가</th>
                                        <td class="price {$product_price_del}">{$product_price}</td>
                                    </tr>
                                    <tr class="{$product_sale_price_display|display}">
                                        <th scope="row">할인판매가</th>
                                        <td class="sale">{$product_sale_price}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="option">
                            <table border="1" summary="">
                                <caption>옵션 정보</caption>
                                <tbody>
                                <tr module="product_addoption">
                                    <th>{$add_option_name}</th>
                                    <td>
                                        <span class="inputWrap">{$form.add_option}</span>
                                        <span class="txtByte" title="현재글자수/최대글자수">(<strong class="length">0</strong>/{$option_maxlength})</span>
                                    </td>
                                </tr>
                                <tr module="product_option">
                                    <th>{$option_name}</th>
                                    <td>{$form.option}</td>
                                </tr>
                                <tr module="product_noneoption">
                                    <th>상품선택</th>
                                    <td>{$form.noneoption}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div><!-- //참고 -->
                <!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
                <div id="{$total.total_id}" class="{$total.total_display|display}">
                    <p class="info {$single_item_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/ico_information.gif" alt="" /> 수량을 선택해주세요.</p>
                    <p class="info {$several_item_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/ico_information.gif" alt="" /> 위 옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.</p>
                    <table border="1" summary="">
                        <caption>상품 목록</caption>
                        <colgroup>
                            <col style="width:211px;" />
                            <col style="width:80px;;" />
                            <col style="width:110px;" />
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col">상품명</th>
                                <th scope="col">상품수</th>
                                <th scope="col">가격</th>
                            </tr>
                        </thead>
                        <tbody class="{$quantity_display|display}">
                            <tr>
                                <td>{$name}</td>
                                <td>
                                    <span class="quantity">
                                        {$quantity}
                                        <a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_count_up.gif" alt="수량증가" class="{$quantity_up_class} up" /></a>
                                        <a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_count_down.gif" alt="수량감소" class="{$quantity_down_class} down" /></a>
                                    </span>
                                </td>
                                <td class="right"><span class="{$total.quantity_price}">{$product_price}</span> <span class="mileage {$mileage_display|display}">(<img src="{$mileage_mileage_icon}" /> <span class="{$total.mileage_price}">{$mileage_value}</span>)</span></td>
                            </tr>
                        </tbody>
                        <!-- 참고 : 옵션선택 또는 세트상품 선택시 상품이 추가되는 영역입니다. 쇼핑몰 화면에는 아래와 같은 마크업구조로 표시됩니다. 삭제시 기능이 정상동작 하지 않습니다.-->
                        <tbody>
                            <!-- tr>
                                <td>
                                    <p class="product">
                                        $상품명
 
                                        <span>$옵션</span>
                                    </p>
                                </td>
                                <td>
                                    <span class="quantity">
                                        <input type="text" class="quantity_opt" />
                                        <a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_count_up.gif" alt="수량증가" class="up" /></a>
                                        <a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_count_down.gif" alt="수량감소" class="down" /></a>
                                    </span>
                                    <a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_price_delete.gif" alt="삭제" class="option_box_del" /></a>
                                </td>
                                <td class="right">
                                    <span>$가격</span>
                                    <span class="mileage">(<img src="http://img.echosting.cafe24.com/design/skin/admin/ko_KR/product/icon_sett04.gif" /> <span class="mileage_price">$적립금</span>)</span>
                                </td>
                            </tr -->
                        </tbody>
                        <!-- //참고 -->
                        <tfoot>
                            <tr>
                                <td colspan="3"><strong>총 상품금액</strong>(수량) : <span class="{$total.total_cnt}"><strong><em>0</em></strong> (0개)</span></td>
                            </tr>
                        </tfoot>
                    </table>
                </div><!-- //참고 -->
                <!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
                <div module="product_action">
                    <div class="btnArea">
                        <a href="#none" class="first {$buy_display|display}" onclick="{$action_buy}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_buy_big.gif" alt="바로구매하기" /></a>
                        <a href="#none" class="{$basket_display|display}" onclick="{$action_basket}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_cart_big.gif" alt="장바구니 담기" /></a>
                        <span class="{$soldout_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_sold_out.gif" alt="SOLD OUT" /></span>
                        <a href="#none" onclick="{$action_detail}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_product_view.gif" alt="상품상세 보기" /></a>
                    </div>
                    <!-- 네이버 체크아웃 구매 버튼  -->
                    <div id="NaverChk_Button"></div><!-- //네이버 체크아웃 구매 버튼  -->
                </div><!-- //참고 -->
            </div><!-- //상세정보 내역 -->
        </div>
    </div>
</div>

변수명	설명
{$medium_img}	대 이미지
{$small_img}	중 이미지
{$tiny_img}	소 이미지
{$thumb_img_class}	섬네일class명
{$name}	상품명
{$soldout_icon}	품절 아이콘
{$recommend_icon}	추천 아이콘
{$new_icon}	신상품 아이콘
{$mileage_icon}	적립금 아이콘
{$product_icons}	사용자 지정 아이콘
{$benefit_icons}	혜택 아이콘
{$product_price}	판매가(판매가 대체 문구 사용시는 판매가 대체 문구)
{$product_price_display}	판매가 노출 여부
{$product_price_class}	판매가 class명
{$product_custom}	소비자가
{$price_custom_display}	소비자가 노출 여부
{$manu_name}	제조사
{$made_in}	원산지
{$option_name}	옵션 이름
{$form.option}	옵션
{$add_option}	사용자 추가옵션 이름
{$form.add_option}	사용자 추가옵션
{$img_display}	작은 이미지 표시여부
{$add_img_1_display}	추가 이미지1 표시여부
{$add_img_1}	추가 이미지1
{$add_img_2_display}	추가 이미지2 표시여부
{$add_img_2}	추가 이미지2
{$add_img_3_display}	추가 이미지3 표시여부
{$add_img_3}	추가 이미지3
{$add_img_4_display}	추가 이미지4 표시여부
{$add_img_4}	추가 이미지4
{$form.quantity}	수량
{$QuantityUp_id}	수량증가ID
{$QuantityDown_id}	수량감소ID
{$form.delvtypeA}	국내배송
{$form.delvtypeB}	해외배송
{$twitter_icon}	트윗터 아이콘
{$facebook_icon}	페이스북 아이콘
{$me2day_icon}	미투데이 아이콘
{$yozm_icon}	요즘 아이콘
{$optionlist}	옵션 반복 변수
{$addoptionlist}	사용자 지정 옵션 반복 변수
{$mileage_content_display}	적립금 전체 내용 노출 여부
{$mileage_display}	구매시 적립금 노출 여부
{$mileage_value}	구매시 적립금
{$mileage_percent}	구매시 적립금 비율
{$mileage_percent_display}	구매시 적립금 비율 노출 여부
{$cash_mileage_display}	무통장 구매시 적립금 노출 여부
{$cash_mileage_icon}	무통장 구매시 적립금 아이콘
{$cash_mileage_value}	무통장 구매시 적립금
{$cash_mileage_percent}	무통장 구매시 적립금 비율
{$cash_mileage_percent_display}	무통장 구매시 적립금 비율 노출 여부
{$card_mileage_display}	카드 구매시 적립금 노출 여부
{$card_mileage_icon}	카드 구매시 적립금 아이콘
{$card_mileage_value}	카드 구매시 적립금
{$card_mileage_percent}	카드 구매시 적립금 비율
{$card_mileage_percent_display}	카드 구매시 적립금 비율 노출 여부
{$tcash_mileage_display}	실시간 계좌이체 구매시 적립금 노출 여부
{$tcash_mileage_icon}	실시간 계좌이체 구매시 적립금 아이콘
{$tcash_mileage_value}	실시간 계좌이체 구매시 적립금
{$tcash_mileage_percent}	실시간 계좌이체 구매시 적립금 비율
{$tcash_mileage_percent_display}	실시간 계좌이체 구매시 적립금 비율 노출 여부
{$mileage_mileage_display}	적립금 구매시 적립금 노출 여부
{$mileage_mileage_icon}	적립금 구매시 적립금 아이콘
{$mileage_mileage_value}	적립금 구매시 적립금
{$mileage_mileage_percent}	적립금 구매시 적립금 비율
{$mileage_mileage_percent_display}	적립금 구매시 적립금 비율 노출 여부
{$cell_mileage_display}	휴대폰 결제 구매시 적립금 노출 여부
{$cell_mileage_icon}	휴대폰 결제 구매시 적립금 아이콘
{$cell_mileage_value}	휴대폰 결제 구매시 적립금
{$cell_mileage_percent}	휴대폰 결제 구매시 적립금 비율
{$cell_mileage_percent_display}	휴대폰 결제 구매시 적립금 비율 노출 여부
{$product_open_date}	상품 제조일자
{$product_open_date_display\|display}	상품 제조일자 표시여부 (class)
{$expiration_date }	상품 유효기간
{$expiration_date_display\|display}	상품 유효기간 표시여부 (class)
{$colorchip_display\|display}	컬러칩 노출 여부
{$color}	컬러칩 색상 값

변수명	설명
{$item_display}	설정 항목 노출 여부
{$item_class}	디자인 설정 내역 CSS 클래스
{$item_title}	저장된 표시항목명
{$item_content}	상품에 해당되는 내용

변수명	설명
{$option_name}	옵션명
{$form.option}	옵션내용

변수명	설명
{$file_option_name}	파일첨부 옵션 이름
{$form.file_option}	파일첨부 옵션
{$file_option_limit}	첨부파일 제한용량

변수명	설명
{$option_name}	옵션명
{$form.option}	옵션내용

변수명	설명
{$option_name}	옵션명
{$form.option}	옵션내용

변수명	설명
{$action_buy}	바로 구매 버튼
{$buy_display}	바로 구매 버튼 노출 여부
{$action_basket}	장바구니 넣기 버튼
{$basket_display}	장바구니 넣기 버튼 노출 여부
{$action_wishlist}	관심상품등록
{$action_recommend}	추천메일등록
{$dc_info_display}	할인정보 표시여부
{$group_image}	할인정보 이미지
{$user_name}	회원이름
{$group_name}	회원등급
{$discount_display}	할인 표시여부
{$dc_min_display}	최소할인 금액 표시여부
{$dc_min}	최소할인 금액
{$dc_paymethod_display}	마일리지 상품 표시여부
{$dc_paymethod}	마일리지 상품
{$dc_value}	할인 금액
{$dc_max_display}	최대할인금액 표시여부
{$dc_max_value}	최대할인 금액
{$mileage_display}	마일리지 표시여부
{$dc_mileage_min_display}	최소마일리지 표시여부
{$dc_mileage_min}	최소마일리지 금액
{$dc_mileage_value}	마일리지 금액
{$dc_mileage_max_display}	최대마일리지 표시여부
{$dc_mileage_max_value}	최대마일리지 금액

저작자표시 비영리 동일조건

'웹 코딩 > cafe24 - PC디자인' 카테고리의 다른 글

[카페24쇼핑몰] 최근 본 상품 목록 (0)	2015.04.07
[카페24쇼핑몰] 상품상세 하단영역 (0)	2015.04.07
[카페24쇼핑몰] 최대할인쿠폰 다운받기 팝업 (0)	2015.04.07
[카페24쇼핑몰] 상품조르기 팝업 (0)	2015.04.07
[카페24쇼핑몰] 추천메일 보내기 팝업 (0)	2015.04.07

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

💸원 and beyond

티스토리 뷰

[카페24쇼핑몰] 이미지 확대보기 팝업

'웹 코딩 > cafe24 - PC디자인' 카테고리의 다른 글

티스토리툴바