CODEWITHSUNDEEP
androidjqueryiosjquery-mobileswipe
D Benway
D Benway

Reputation: 77

Using jQuery "swipe" function to navigate an array of images

I'm building a simple slideshow that is controlled by buttons when viewed on a computer and by swiping gestures on touch screen devices. This is a demo with 3 images.

Each image, its corresponding caption and the navigation are contained within one div. Here's the first one:

<div class="item" id="1">
    <img src="...">
    <div class="caption">
        caption 1
    </div>
    <div class="navigation">
        <a href="#" id="1prev">&lt</a> 1 / 3 <a href="#" id="1next">&gt</a>
    </div>
</div>

These divs are shown or hidden using the "click" and "swipeleft / swiperight" functions. 

$(document).ready(function () {
    $("#1prev").click(function () {
        $("#1").hide();
        $("#3").show();
    });
    $("#1").on("swipeleft", function () {
        $("#1").hide();
        $("#3").show();
    });
    $("#1next").click(function () {
        $("#1").hide();
        $("#2").show();
    });
    $("#1").on("swiperight", function () {
        $("#1").hide();
        $("#2").show();
    });
});

The slideshow will contain as many as 40 images in total. Is there a way to condense the script? Is this a relatively efficient and accessible solution? Is the code written properly? Can it be improved?

Upvotes: 0

Views: 3776

Answers (1)

ezanker
ezanker

Reputation: 24738

You could do something like this:

For the items, I have assigned classes to the prev and next buttons instead of IDs.

<div class="item" id="1">
    <img src="http://www.leecorbin.co/img1.jpg" width="50%" />
    <div class="caption">caption 1</div>
    <div class="navigation"> 
        <a href="#" class="prevBtn">&lt</a> 
        1 / 3 
        <a href="#" class="nextBtn">&gt</a>
    </div>
</div>

Then in script, on pagecreate

Hide all items and show only the first one. Add a handler for swipeleft and swiperight on items. Add a click handler for the navigation buttons Within these handlers determine which direction we are going and which slide we are currently on. Call a function passing in the direction and current slide; it determines the next slide to show and makes the transition.

$(document).on("pagecreate", "#page1", function () {
    $(".item").hide().first(0).show();

    $(document).on("swipeleft swiperight", ".item", function (e) {
        var dir = 'prev';
        if (e.type == 'swipeleft') {
            dir = 'next';
        }
        GoToNextSlide($(this), dir);
    });

    $(document).on("click", ".navigation > a", function (e) {
        var dir = 'prev';
        if ($(this).hasClass("nextBtn")) {
            dir = 'next';
        }
        var $item = $(this).closest(".item");
        GoToNextSlide($item, dir);
    });

});

function GoToNextSlide($item, direction) {
    var $next;
    if (direction == 'next') {
        if ($item.next().length > 0) {
            $next = $item.next();
        } else {
            $next = $(".item").first();
        }
    } else {
        if ($item.prev().length > 0) {
            $next = $item.prev();
        } else {
            $next = $(".item").last();
        }
    }
    $item.fadeOut(function () {
        $next.fadeIn();
    });
}

Updated DEMO

Upvotes: 1

Related Questions