diff --git a/css/mobile_shop.css b/css/mobile_shop.css index e721a5e31..23e58bcf4 100644 --- a/css/mobile_shop.css +++ b/css/mobile_shop.css @@ -60,7 +60,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} +#slide_tab li {position:absolute;top:0;left:0;width:80px;text-align:center} #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 1b2503a10..335942768 100644 --- a/js/jquery.slideview.js +++ b/js/jquery.slideview.js @@ -5,9 +5,9 @@ slide_wrap: "sidx_slide", slide: "section", slide_tab: "slide_tab", - tab_class: "slide_tab", slide_class: "sidx_slide", active_class: "slide_active", + tab_active: "tab_active", duration: 300 }; @@ -29,12 +29,18 @@ var tabw_width = 0; var tabs_count = 0; var tab_width = 0; + var li_left = 0; + var pos_left = 0; function tab_make() { if(count < 1) return; + idx = $slides.index($slides.filter("."+cfg.active_class)); + if(idx == -1) + idx = 0; + var subj; var tabs = ""; @@ -54,22 +60,39 @@ $tab = $this.find("#"+cfg.slide_tab); $tabs = $tab.find("li"); } + + tabs_count = $tabs.size(); } tabw_width = $tab.width(); - tabs_count = $tabs.size(); - tab_width = $tabs.eq(0).width(); + tab_width = $tabs.eq(idx).width(); if(tabs_count < 1) { $tab.remove(); return; } - var li_left = 0; - if(tabs_count < 3) { - li_left = parseInt((tab_width - (tab_width * tabs_count)) / (tabs_count + 1)); + li_left = parseInt((tabw_width - (tab_width * tabs_count)) / (tabs_count + 1)); + + $tabs.each(function(index) { + pos_left += (li_left + (tab_width * index)); + $(this).css("left", pos_left); + }); + + $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.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.not(".tab_listed").css("left", "-"+tab_width+"px"); } } @@ -112,6 +135,19 @@ { left: "-="+width }, cfg.duration, function() { $slides.eq(next).addClass(cfg.active_class); + + if(count >= 3) { + $tabs.removeClass("tab_listed").css("display", "none"); + + $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.removeClass(cfg.tab_active); + $tabs.eq(next).addClass(cfg.tab_active); } ); } @@ -141,6 +177,19 @@ { left: "+="+width }, cfg.duration, function() { $slides.eq(next).addClass(cfg.active_class); + + if(count >= 3) { + $tabs.css("display", "none").removeClass("tab_listed"); + + $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.removeClass(cfg.tab_active); + $tabs.eq(next).addClass(cfg.tab_active); } ); } @@ -151,13 +200,13 @@ return true; } - tab_make(); - $(window).on("load", function(e) { + tab_make(); swipe_init(); }); $(window).on("resize", function(e) { + tab_make(); swipe_init(); }); diff --git a/mobile/shop/index.php b/mobile/shop/index.php index bde959c8d..a2ad0dcba 100644 --- a/mobile/shop/index.php +++ b/mobile/shop/index.php @@ -53,6 +53,62 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
+추천상품 모음
+인기상품 모음
+할인상품 모음
+