Update

Question

16

Horizontal scrolling and vertical scrolling in JqueryMobile

rated 0 times [ 22] [ 6] / answers: 1 / hits: 18866 / 11 Years ago, fri, december 13, 2013, 12:00:00

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

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

samsons

Add To Favorites

Follow

Total Points: 331

Total Questions: 97

Total Answers: 106

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

answered 11 Years ago josefn · Accepted Answer

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

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

.wrapper {

  overflow: hidden;

  position: relative;

  height: 200px;

  width: 400px;

  margin: 0 auto;

}

Inner wrapper - To append images to:

.inner {

  height: 200px;

  width: auto;

  position: absolute;

  left: 0;

  white-space: nowrap;

}

Transition wrappers - Used for images transition in and out:
```
.holder, .in, .hidden {

  position: absolute;

}
```

Hide preloaded images:
```
.hidden {

  display: none;

}
```

JS

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 */

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

});

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

      }

    }

});

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}