Masterskin

코드 변경시 백업은 필수!

1. 수정 파일 위치 : 스마트디자인편집창 - 전체화면보기 > 레이아웃/기본레이아웃/tool/css/produtct.css

/*상품상세 추가이미지*/
.xans-product-detail .imgArea .listImg ul {
	margin: 0px;
	height: auto;
}
.xans-product-detail .imgArea .listImg li {
	margin: 0px;
	vertical-align: inherit
}
.xans-product-detail .imgArea .listImg .next {
	background: url('/layout/basic/tool/img/up.png') no-repeat!important;
	background-position: 0px 0px!important;
	width: 60px;
	height: 24px;
}
.xans-product-detail .imgArea .listImg .prev {
	background: url('/layout/basic/tool/img/down.png') no-repeat!important;
	background-position: 0px 0px!important;
	width: 60px;
	height: 24px;
	bottom: 0px!important;
	top: auto!important
}

2. 수정 파일 위치 : 스마트디자인편집창 - 전체화면보기 > /js/module/product/product_image.js

/*상품상세 섬네일 롤링*/
$(document).ready(function(){
    $.fn.prdImg = function(parm){
        var index = 0;
        var target = parm.target;
        var view = parm.view;
        var listWrap = target.find('.xans-product-addimage');
        var limit = listWrap.find('> ul > li').length;
        var ul = target.find('.xans-product-addimage > ul');
        var liFirst = target.find('.xans-product-addimage > ul > li:first-child');
        var liWidth = parseInt(liFirst.width());
        var liHeight = parseInt(liFirst.height());
        var blockWidth = liWidth + parseInt(liFirst.css('marginRight')) + parseInt(liFirst.css('marginLeft'));
        var columWidth = blockWidth * view;
        var colum = Math.ceil(limit / view);

        var roll = {
            init : function(){
                function struct(){
                    var ulWidth = limit * parseInt(blockWidth);
                    listWrap.append('<button type="button" class="prev">이전</button>');
                    listWrap.append('<button type="button" class="next">다음</button>');
                    ul.css({'position':'absolute', 'left':0, 'top':0});
                    listWrap.css({'position':'relative', 'height':liHeight*8});

                    var prev = listWrap.find('.prev');
                    var next = listWrap.find('.next');

                    prev.click(function(){
                        if(index > 0){
                            index --;
                        }
                        roll.slide(index);
                    });
                    next.click(function(){
                        if(index < (colum-1) ){
                            index ++;
                        }
                        roll.slide(index);
                    });
                    if(index == 0){
                        prev.hide();
                    } else {
                        prev.show();
                    }
                    if(index >= (colum-1)){
                        next.hide();
                    } else {
                        next.show();
                    }
                }
                if(limit > view){
                    struct();
                }
            },
            slide : function(index){
                var top = '-' + (index * columWidth) +'px';
                var prev = listWrap.find('.prev');
                var next = listWrap.find('.next');
                if(index == 0){
                    prev.hide();
                } else {
                    prev.show();
                }
                if(index >= (colum-1)){
                    next.hide();
                } else {
                    next.show();
                }
                ul.stop().animate({'top':top},500);
            }
        }
        roll.init();
    };

    // 함수호출 : 상품상세 페이지
    $.fn.prdImg({
        target : $('.xans-product-image'),
        view : 8
    });

    // 함수호출 : 상품확대보기팝업
    $.fn.prdImg({
        target : $('.xans-product-zoom'),
        view : 8
    });

});

3. 첨부된 btn.zip 파일에 압축을 풀어 FTP를 이용해 아래 위치로 업로드해 주세요.

/layout/basic/tool/img/