diff --git a/css/mobile_shop.css b/css/mobile_shop.css index 23e58bcf4..807ccfbc6 100644 --- a/css/mobile_shop.css +++ b/css/mobile_shop.css @@ -61,6 +61,7 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none} /* 인덱스 상품 */ #slide_tab {margin:0;padding:0;list-style:none;position:relative;width:100%;height:50px;background-color:#eee;overflow:hidden} #slide_tab li {position:absolute;top:0;left:0;width:80px;text-align:center} +#slide_tab .tab_active {color:red} #sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden} .sidx_slide {position:absolute;top:0;left:0;width:100%} diff --git a/js/jquery.slideview.js b/js/jquery.slideview.js index 335942768..2d9d0b8fc 100644 --- a/js/jquery.slideview.js +++ b/js/jquery.slideview.js @@ -8,7 +8,7 @@ slide_class: "sidx_slide", active_class: "slide_active", tab_active: "tab_active", - duration: 300 + duration: 500 }; if(typeof option == "object") @@ -18,200 +18,223 @@ var $wrap = this.find("#"+cfg.slide_wrap); var $tab = null; var $tabs; + var $btns; var $slides = this.find(cfg.slide); + var count = $slides.size(); + + if(count < 1) + return; $slides.addClass(cfg.slide_class); var height; - var width = $(window).width(); - var count = $slides.size(); + var width; var idx = next = 0; var tabw_width = 0; - var tabs_count = 0; var tab_width = 0; var li_left = 0; var pos_left = 0; + var touchstartX, touchstartY, touchendX, touchendY, touchoffsetX, touchoffsetY; function tab_make() { - if(count < 1) - return; + var subj; + var tabs = ""; + + $slides.each(function() { + subj = $(this).find("header h2").text(); + if(subj.length < 1) + subj = " "; + + tabs += "
  • \n"; + }); + + if(tabs != "") { + tabs = ""; + $wrap.before(tabs); + + $tab = $this.find("#"+cfg.slide_tab); + $tabs = $tab.find("li"); + $btns = $tab.find("button"); + + $btns.on("click", function() { + tab_click($(this)); + }); + } + } + + function swipe_init() + { + if($tab == null) + tab_make(); idx = $slides.index($slides.filter("."+cfg.active_class)); if(idx == -1) idx = 0; - var subj; - var tabs = ""; - - if($tab == null) { - $slides.each(function() { - subj = $(this).find("header h2").text(); - if(subj.length < 1) - subj = " "; - - tabs += "
  • "+subj+"
  • \n"; - }); - - if(tabs != "") { - tabs = ""; - $wrap.before(tabs); - - $tab = $this.find("#"+cfg.slide_tab); - $tabs = $tab.find("li"); - } - - tabs_count = $tabs.size(); - } + $slides.eq(idx).addClass(cfg.active_class); + width = $wrap.width(); tabw_width = $tab.width(); - tab_width = $tabs.eq(idx).width(); + tab_width = $tabs.eq(0).width(); + height = $slides.eq(idx).height(); + $wrap.height(height); - if(tabs_count < 1) { - $tab.remove(); - return; - } + $slides.not("."+cfg.active_class).css("left", "-"+width+"px"); - if(tabs_count < 3) { - li_left = parseInt((tabw_width - (tab_width * tabs_count)) / (tabs_count + 1)); + if(count < 3) { + pos_left = 0; + li_left = parseInt((tabw_width - (tab_width * count)) / (count + 1)); $tabs.each(function(index) { pos_left += (li_left + (tab_width * index)); $(this).css("left", pos_left); }); + $tabs.removeClass(cfg.tab_actie); $tabs.eq(idx).addClass(cfg.tab_active); } else { li_left = parseInt((tabw_width - (tab_width * 3)) / 2); pos_left = tab_width + li_left; pos_right = tabw_width - tab_width; - $tabs.css("display", "none").removeClass("tab_listed"); + $tabs.removeClass(cfg.tab_actie+" tab_listed").css("left", "-"+tab_width+"px"); - $tabs.eq(idx - 1).addClass("tab_listed").css({left: "0px", display: "block"}); - $tabs.eq(idx).addClass("tab_listed").css({left: pos_left+"px", display: "block"}).addClass(cfg.tab_active); - $tabs.eq((idx + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"}); + $tabs.eq(idx - 1).addClass("tab_listed").css("left", "0px"); + $tabs.eq(idx).addClass(cfg.tab_active+" tab_listed").css("left", pos_left+"px"); + $tabs.eq((idx + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); - $tabs.not(".tab_listed").css("left", "-"+tab_width+"px"); + $slides.eq((idx - 1)).css("left", "-"+width+"px"); + $slides.eq((idx + 1) % count).css("left", width+"px"); } } - function swipe_init() - { - idx = $slides.index($slides.filter("."+cfg.active_class)); - if(idx == -1) - idx = 0; - - width = $(window).width(); - $slides.eq(idx).addClass(cfg.active_class); - $slides.not("."+cfg.active_class).css("left", width+"px"); - - height = $slides.eq(idx).height(); - $wrap.height(height); - } - function swipe_left() { + if(count < 2) + return; + if(check_animated()) return; idx = $slides.index($slides.filter("."+cfg.active_class)); next = (idx + 1) % count; - $slides.not("."+cfg.active_class).css("left", width+"px"); - - width = $(window).width(); height = $slides.eq(next).height(); $wrap.height(height); - $slides.eq(idx).animate( + $slides.eq(next).css("left", width+"px"); + $tabs.removeClass(cfg.tab_active); + + $slides.eq(idx).clearQueue().animate( { left: "-="+width }, cfg.duration, function() { - $slides.eq(idx).removeClass(cfg.active_class); + $slides.eq(idx).css("left", width+"px"); } ); - $slides.eq(next).animate( + $slides.eq(next).clearQueue().animate( { left: "-="+width }, cfg.duration, function() { - $slides.eq(next).addClass(cfg.active_class); - if(count >= 3) { - $tabs.removeClass("tab_listed").css("display", "none"); + $tabs.removeClass("tab_listed").css("left", "-"+tab_width+"px"); - $tabs.eq(next - 1).addClass("tab_listed").css({left: "0px", display: "block"}); - $tabs.eq(next).addClass("tab_listed").css({left: pos_left+"px", display: "block"}); - $tabs.eq((next + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"}); - - $tabs.not(".tab_listed").css("left", tabw_width+"px"); + $tabs.eq(next - 1).addClass("tab_listed").css("left", "0px"); + $tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px"); + $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); } - $tabs.removeClass(cfg.tab_active); $tabs.eq(next).addClass(cfg.tab_active); } ); + + $slides.eq(idx).removeClass(cfg.active_class); + $slides.eq(next).addClass(cfg.active_class); } function swipe_right() { + if(count < 2) + return; + if(check_animated()) return; idx = $slides.index($slides.filter("."+cfg.active_class)); - next = idx - 1 + next = idx - 1; + if(next < 0) + next = count - 1; - $slides.not("."+cfg.active_class).css("left", "-"+width+"px"); - - width = $(window).width(); height = $slides.eq(next).height(); $wrap.height(height); - $slides.eq(idx).animate( + $slides.eq(next).css("left", "-"+width+"px"); + $tabs.removeClass(cfg.tab_active); + + $slides.eq(idx).clearQueue().animate( { left: "+="+width }, cfg.duration, function() { - $slides.eq(idx).removeClass(cfg.active_class); + $slides.eq(idx).css("left", "-"+width+"px"); } ); - $slides.eq(next).animate( + $slides.eq(next).clearQueue().animate( { left: "+="+width }, cfg.duration, function() { - $slides.eq(next).addClass(cfg.active_class); - if(count >= 3) { - $tabs.css("display", "none").removeClass("tab_listed"); + $tabs.removeClass("tab_listed").css("left", "-"+tab_width+"px"); - $tabs.eq(next - 1).addClass("tab_listed").css({left: "0px", display: "block"}); - $tabs.eq(next).addClass("tab_listed").css({left: pos_left+"px", display: "block"}); - $tabs.eq((next + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"}); - - $tabs.not(".tab_listed").css("left", "-"+tab_width+"px"); + $tabs.eq(next - 1).addClass("tab_listed").css("left", "0px"); + $tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px"); + $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px"); } - $tabs.removeClass(cfg.tab_active); $tabs.eq(next).addClass(cfg.tab_active); } ); + + $slides.eq(idx).removeClass(cfg.active_class); + $slides.eq(next).addClass(cfg.active_class); } function check_animated() { if($slides.filter(":animated").size()) return true; + else + return false; + } + + function tab_click($el) + { + if(check_animated()) + return; + + if($el.parent().hasClass(cfg.tab_active)) + return; + + idx = $slides.index($slides.filter("."+cfg.active_class)); + + var idx_pos = parseInt($tabs.eq(idx).css("left")); + var btn_pos = parseInt($el.parent().css("left")); + + if(idx_pos > btn_pos) + swipe_right(); + else(idx_pos < btn_pos) + swipe_left(); } $(window).on("load", function(e) { - tab_make(); swipe_init(); }); $(window).on("resize", function(e) { - tab_make(); swipe_init(); }); + // swipe event - $this + this .on("swipeleft", function(e) { swipe_left(); }) diff --git a/mobile/shop/index.php b/mobile/shop/index.php index a2ad0dcba..b2f6febf5 100644 --- a/mobile/shop/index.php +++ b/mobile/shop/index.php @@ -54,61 +54,61 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
    -
    -

    추천상품

    -

    추천상품 모음

    -
    - set_mobile(true); - $list->set_type(3); - $list->set_view('it_id', false); - $list->set_view('it_name', true); - $list->set_view('it_cust_price', false); - $list->set_view('it_price', true); - $list->set_view('it_icon', true); - $list->set_view('sns', true); - echo $list->run(); - ?> -
    +
    +

    추천상품

    +

    추천상품 모음

    +
    + set_mobile(true); + $list->set_type(3); + $list->set_view('it_id', false); + $list->set_view('it_name', true); + $list->set_view('it_cust_price', false); + $list->set_view('it_price', true); + $list->set_view('it_icon', true); + $list->set_view('sns', true); + echo $list->run(); + ?> + -
    -
    -

    인기상품

    -

    인기상품 모음

    -
    - set_mobile(true); - $list->set_type(4); - $list->set_view('it_id', false); - $list->set_view('it_name', true); - $list->set_view('it_cust_price', false); - $list->set_view('it_price', true); - $list->set_view('it_icon', true); - $list->set_view('sns', true); - echo $list->run(); - ?> -
    +
    +
    +

    인기상품

    +

    인기상품 모음

    +
    + set_mobile(true); + $list->set_type(4); + $list->set_view('it_id', false); + $list->set_view('it_name', true); + $list->set_view('it_cust_price', false); + $list->set_view('it_price', true); + $list->set_view('it_icon', true); + $list->set_view('sns', true); + echo $list->run(); + ?> +
    -
    -
    -

    할인상품

    -

    할인상품 모음

    -
    - set_mobile(true); - $list->set_type(5); - $list->set_view('it_id', false); - $list->set_view('it_name', true); - $list->set_view('it_cust_price', false); - $list->set_view('it_price', true); - $list->set_view('it_icon', true); - $list->set_view('sns', true); - echo $list->run(); - ?> -
    +
    +
    +

    할인상품

    +

    할인상품 모음

    +
    + set_mobile(true); + $list->set_type(5); + $list->set_view('it_id', false); + $list->set_view('it_name', true); + $list->set_view('it_cust_price', false); + $list->set_view('it_price', true); + $list->set_view('it_icon', true); + $list->set_view('sns', true); + echo $list->run(); + ?> +
    @@ -124,7 +124,7 @@ $(function() { slide_class: "sidx_slide", active_class: "slide_active", tab_active: "tab_active", - duration: 300 + duration: 500 } ); });