Horizontal scrolling and vertical scrolling in JqueryMobile [closed]

Question

I want to implement horizontal scrolling with vertical sliding .Something like picture given below.

For doing the same I search and found this one http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html But the code written in this blog does not make sense to me.

I also downloaded the demo provided at http://www.idangero.us/sliders/swiper/ and try to modified according to my need. But could not able to do the same. If any one have Idea or link or demo project then please help me. Regards!

Answer 1

Update

I have made some major modification, which give more control over touch events. You can now set minimum/maximum values of touch duration, distance, and threshold for both X and Y axis.

Moreover, images now are preloaded for smoother transition between images.

---

I have made this rather complicated code based on touch events touchstart and touchend, horizontally and vertically. The code catches touch events and then interpret them into swipe up, right, down and left.

Images are exchanged with .animate() according to swipe's direction. Swipe up and left, load next images in array; down and right load previous ones.

It is somehow lengthy, and have too much room of enhancement. For instance, you can calculate time elapsed between both events touchstart and touchend to ensure that the touch was sufficient enough to trigger custom swipes.

I'll go through code's main parts for more explanation.

HTML

<div class="wrapper">
  <div class="inner">
    <!-- images go here -->
   </div>
</div>

---

CSS

1. Wrapper - height and width should be adjusted to your need:

   .wrapper {
     overflow: hidden;
     position: relative;
     height: 200px;
     width: 400px;
     margin: 0 auto;
   }
   

2. Inner wrapper - To append images to:

   .inner {
     height: 200px;
     width: auto;
     position: absolute;
     left: 0;
     white-space: nowrap;
   }
   

3. Transition wrappers - Used for images transition in and out:

   .holder, .in, .hidden {
     position: absolute;
   }
   

4. Hide preloaded images:

   .hidden {
     display: none;
   }
   

---

JS

1. Variables and defaults:

   var total = images.length - 1, /* images total number */
       current = 0,               /* image's index */
       startX = '',               /* touchstart X coordinate */ 
       startY = '',               /* touchstart Y coordinate */
       endX = '',                 /* touchend X coordinate */
       endY = '';                 /* touchend Y coordinate */
       swipeDuration = 1000,      /* max touch duration */
       swipeDistanceX = 50,       /* X-axis min touch distance */
       swipeDistanceY = 50,       /* Y-axis min touch distance */
       thresholdX = 30,           /* X-axis max touch displacement */
       thresholdY = 30;           /* Y-axis max touch displacement */
   

2. Preload images:

   Wrap each one in holder and then append them to inner div, on pageinit event or any other jQM page events.

   $(document).on("pageinit", "#gallery", function () {
       $.each(images, function (i, src) {
           $("<div class='holder hidden'><img src=" + src + " /></div>").appendTo(".inner");
       });
       $(".inner .holder:first-child").toggleClass("visible hidden");
   });
   

3. Touch events interpretation - bind Touch events to inner div:

   Touch duration and distance are added to comparison.

   $(document).on("touchstart", ".inner", function (e, ui) {
       startX = e.originalEvent.touches[0].pageX;
       startY = e.originalEvent.touches[0].pageY;
       start = new Date().getTime(); /* touch start */
   }).on("touchmove", ".inner", function (e, ui) {
   
       /* prevent page from scrolling */
       e.preventDefault();
   
   }).on("touchend", ".inner", function (e, ui) {
       endX = e.originalEvent.changedTouches[0].pageX;
       endY = e.originalEvent.changedTouches[0].pageY;
       end = new Date().getTime(); /* touch end */
       if ((end - start) < swipeDuration) {
         if (startX > endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) {
           showImg(current, "left");
         } else if (startX < endX && Math.abs(startY - endY) <= thresholdY && Math.abs(startX - endX) >= swipeDistanceX) {
            showImg(current, "right");
         } else if (startY > endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) {
           showImg(current, "up");
         } else if (startY < endY && Math.abs(startX - endX) <= thresholdX && Math.abs(startY - endY) >= swipeDistanceY) {
           showImg(current, "down");
         }
       }
   });
   

4. Transition showImg(image index, swipe type) function:

   Added opacity to animation.

   function showImg(index, type) {
       if (type == "left") {
           current = index;
           if (current >= 0 && current < total) {
               current++;
               var distance = $(".visible").width();
               $(".inner .holder").eq(current).css({
                   left: distance
               }).toggleClass("in hidden");
   
               $(".visible").animate({
                   left: "-" + distance + "px",
                   opacity: 0
               }, 600, function () {
                   $(this).toggleClass("visible hidden").css({
                       top: "auto",
                       left: "auto"
                   });
               });
   
               $(".in").animate({
                   left: 0,
                   opacity: 1
               }, 500, function () {
                   $(this).toggleClass("in visible");
               });
           }
       }
   
       if (type == "up") {
           current = index;
           if (current >= 0 && current < total) {
               current++;
               var distance = $(".visible").height();
               $(".inner .holder").eq(current).css({
                   top: distance + "px"
               }).toggleClass("in hidden");
   
               $(".visible").animate({
                   top: "-" + distance + "px",
                   opacity: 0
               }, 600, function () {
                   $(this).toggleClass("visible hidden").css({
                       top: "auto",
                       left: "auto"
                   });
               });
   
               $(".in").animate({
                   top: 0,
                   opacity: 1
               }, 500, function () {
                   $(this).toggleClass("in visible");
               });
           }
       }
   
       if (type == "right") {
           current = index;
           if (current > 0 && current <= total) {
               current--;
               var distance = $(".visible").width();
               $(".inner .holder").eq(current).css({
                   left: "-" + distance + "px"
               }).toggleClass("in hidden");
   
               $(".visible").animate({
                   left: distance + "px",
                   opacity: 0
               }, 600, function () {
                   $(this).toggleClass("visible hidden").css({
                       top: "auto",
                       left: "auto"
                   });
               });
   
               $(".in").animate({
                   left: 0,
                   opacity: 1
               }, 500, function () {
                   $(this).toggleClass("in visible");
               });
           }
       }
   
       if (type == "down") {
           current = index;
           if (current > 0 && current <= total) {
               current--;
               var distance = $(".holder").height();
               $(".inner .holder").eq(current).css({
                   top: "-" + distance + "px"
               }).toggleClass("in hidden");
   
               $(".visible").animate({
                   top: distance + "px",
                   opacity: 0
               }, 600, function () {
                   $(this).toggleClass("visible hidden").css({
                       top: "auto",
                       left: "auto"
                   });
               });
   
               $(".in").animate({
                   top: 0,
                   opacity: 1
               }, 500, function () {
                   $(this).toggleClass("in visible");
               });
           }
       }
   }
   

---

Demo ⁽¹⁾

^{(1) Tested on iPad 2 and iPhone 5 - v7.0.4}

Answer 2

I'm currently at work so didnt had much time to work somethnig out. but created a little thing of 2 projects combined.

added the horizental scrolling to page 3.

http://jsfiddle.net/BL33k/

used some dutch in je javascript so:

var slideAantal = slides.length; //means slidetotal
var slideBreedte = screen.width; //means slidewidth
var beeldHoogte  = screen.height; //means slideheight
var slideHuidig  = 0; //means currentslide

Code is very dirty and there might be a lot of unessecery things but dont have time to go trough that now. Hope it helps you tho.

Answer 3

You can achieve this with simple CSS and some DOM manipulation http://jsfiddle.net/zTGS9/1/

<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        body {
            margin: 0;
        }
        div {
            width: 500px;
            overflow-x: hidden;
        }
        ul {
            list-style: none;
            width: 100%;
            padding: 0;
        }
        li {
            clear: both;
            white-space: nowrap;
            position: relative;
            height: 200px;
            width: 100%;
            overflow-x: hidden;
            padding: 0;
        }
        img {
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            position: absolute;
            display: block;
            top: 0;
        }
        img:nth-of-type(1) {
            left: -700px;
        }
        img:nth-of-type(2) {
            left: -300px;
        }
        img:nth-of-type(3) {
            left: 100px;
        }
        img:nth-of-type(4) {
            left: 500px;
        }
        img:nth-of-type(5) {
            left: 900px;
        }
        img:nth-of-type(6) {
            left: 1300px;
        }

    </style>
    <body>
        <div>
            <ul>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%201/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%202/"/>
                    <img src="http://lorempixel.com/400/200/business/image%203/"/>
                    <img src="http://lorempixel.com/400/200/food/image%204/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%206/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%202/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%203/"/>
                    <img src="http://lorempixel.com/400/200/business/image%204/"/>
                    <img src="http://lorempixel.com/400/200/food/image%205/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%206/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%207/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%204/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%205/"/>
                    <img src="http://lorempixel.com/400/200/business/image%206/"/>
                    <img src="http://lorempixel.com/400/200/food/image%207/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%208/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%209/"/>
                </li>
                <li>
                    <img src="http://lorempixel.com/400/200/sports/image%209/"/>
                    <img src="http://lorempixel.com/400/200/nature/image%208/"/>
                    <img src="http://lorempixel.com/400/200/business/image%207/"/>
                    <img src="http://lorempixel.com/400/200/food/image%206/"/>
                    <img src="http://lorempixel.com/400/200/abstract/image%205/"/>
                    <img src="http://lorempixel.com/400/200/fashion/image%204/"/>
                </li>
            </ul>
        </div>
    </body>
    <script>
       var _lis = document.getElementsByTagName('li');
for (var i = 0; i < _lis.length; ++i) {
    _lis[i].addEventListener('mousedown', function(e) {
        if (e.clientX < (this.offsetWidth >> 1)) {
            this.appendChild(this.removeChild(this.firstElementChild));
        } else {
            this.insertBefore(this.lastElementChild, this.firstElementChild);
           }
    });
}
    </script>
</html>

No time to implement touch events, but I hope you get the idea :)