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
}
);
});