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

2013-10-11 17:42:49 +09:00
parent 7cc386d7a8
commit bf6d89c637
6 changed files with 871 additions and 6 deletions
--- a/js/jquery.slideview.js
+++ b/js/jquery.slideview.js
@ -0,0 +1,128 @@
+(function($) {
+    $.fn.slideSwipe = function(option)
+    {
+        var cfg = {
+                element: "section",
+                sidx_class: "sidx",
+                slide_class: "sidx_slide",
+                active_class: "slide_class",
+                duration: 300
+            };
+
+        if(typeof option == "object")
+            cfg = $.extend( cfg, option );
+
+        this.addClass(cfg.sidx_class);
+        var $this = this;
+        var $slides = this.find(cfg.element);
+        $slides.addClass(cfg.slide_class);
+
+        var height;
+        var width = $(window).width();
+        var count = $slides.size();
+        var idx = next = 0;
+
+        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();
+            $this.height(height);
+        }
+
+        function swipe_left()
+        {
+            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();
+            $this.height(height);
+
+            $slides.eq(idx).animate(
+                { left: "-="+width }, cfg.duration,
+                function() {
+                    $slides.eq(idx).removeClass(cfg.active_class);
+                }
+            );
+
+            $slides.eq(next).animate(
+                { left: "-="+width }, cfg.duration,
+                function() {
+                    $slides.eq(next).addClass(cfg.active_class);
+                }
+            );
+        }
+
+        function swipe_right()
+        {
+            if(check_animated())
+                return;
+
+            idx = $slides.index($slides.filter("."+cfg.active_class));
+            next = idx - 1
+
+            $slides.not("."+cfg.active_class).css("left", "-"+width+"px");
+
+            width = $(window).width();
+            height = $slides.eq(next).height();
+            $this.height(height);
+
+            $slides.eq(idx).animate(
+                { left: "+="+width }, cfg.duration,
+                function() {
+                    $slides.eq(idx).removeClass(cfg.active_class);
+                }
+            );
+
+            $slides.eq(next).animate(
+                { left: "+="+width }, cfg.duration,
+                function() {
+                    $slides.eq(next).addClass(cfg.active_class);
+                }
+            );
+        }
+
+        function check_animated()
+        {
+            if($slides.filter(":animated").size())
+                return true;
+        }
+
+        $(window).on("load", function(e) {
+            swipe_init();
+        });
+
+        $(window).on("resize", function(e) {
+            swipe_init();
+        });
+
+        // swipe event
+        $this
+         .on("swipeleft", function(e) {
+             swipe_left();
+         })
+         .on("swiperight", function(e) {
+             swipe_right();
+        });
+
+        // scroll event enable
+        $(window).on("movestart", function(e) {
+            if ((e.distX > e.distY && e.distX < -e.distY) ||
+            (e.distX < e.distY && e.distX > -e.distY)) {
+                e.preventDefault();
+            }
+        });
+    }
+}(jQuery));