모바일 쇼핑몰 메인 swipe 기능 추가중

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%}
 

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(idx).width();
-            tab_width = $tabs.eq(0).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();
         });
 

mobile/shop/index.php

@@ -53,6 +53,62 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
             <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div>
         </section>
 
+        <section class="sct_wrap">
+        <header>
+            <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=2">추천상품</a></h2>
+            <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p>
+        </header>
+        <?php
+        $list = new item_list();
+        $list->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();
+        ?>
+    </section>
+
+    <section class="sct_wrap">
+        <header>
+            <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=4">인기상품</a></h2>
+            <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p>
+        </header>
+        <?php
+        $list = new item_list();
+        $list->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();
+        ?>
+    </section>
+
+    <section class="sct_wrap">
+        <header>
+            <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=5">할인상품</a></h2>
+            <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 할인상품 모음</p>
+        </header>
+        <?php
+        $list = new item_list();
+        $list->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();
+        ?>
+    </section>
 
     </div>
 
@@ -65,9 +121,9 @@ $(function() {
             el_class: "sidx",
             selector: "section.sct_wrap",
             slide_tab: "slide_tab",
-            tab_class: "slide_tab",
             slide_class: "sidx_slide",
             active_class: "slide_active",
+            tab_active: "tab_active",
             duration: 300
         }
     );