Touch driven Image Gallery ADVANCED - jQuery Mobile 1.3.2

Complete

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="gallery">
    <div data-role="content">
        <div class="wrapper">
            <div class="inner"></div>
        </div>
    </div>
</div>

CSS

.wrapper {
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 400px;
    margin: 0 auto;
}
.inner {
    height: 200px;
    width: auto;
    position: absolute;
    left: 0;
    white-space: nowrap;
}
.holder, .in, .hidden {
    position: absolute;
}
.hidden {
    display: none;
}

JavaScript

var images = ["http://lorempixel.com/400/200/sports/image%201/", "http://lorempixel.com/400/200/nature/image%202/", "http://lorempixel.com/400/200/business/image%203/", "http://lorempixel.com/400/200/food/image%204/", "http://lorempixel.com/400/200/abstract/image%205/", "http://lorempixel.com/400/200/fashion/image%206/"];

var total = images.length - 1,
    current = 0,
    startX = '',
    startY = '',
    endX = '',
    endY = '',
    start = '',
    end = '',
    /* default */
    swipeDuration = 1000,
    swipeDistanceX = 50,
    swipeDistanceY = 50,
    thresholdX = 30,
    thresholdY = 30;


$(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");
});



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

...