CODEWITHSUNDEEP
javascriptjquery
Michelle Glauser
Michelle Glauser

Reputation: 1097

Sorting images through swiping (using TouchSwipe)

I'm trying to get some pictures to display one by one to be sorted via swiping.

Only one picture should be shown at a time, with the next appearing after a swipe has been made to the left or right. I can get the swipe working with TouchSwipe (http://jsfiddle.net/MichelleGlauser/CR329/1), but once I put the swipe inside of a loop to get all of the pictures, neither the swipe nor the loop work (http://jsfiddle.net/MichelleGlauser/CR329/4/). Maybe I need to go about this a different way that I haven't thought of yet. I've tried several different versions and this is what I'm at now: 

    $(document).ready(function sort_options() {
        var cafe = 'url("http://i1360.photobucket.com/albums/r653/brylans2013/Brylans%20Cafe%20Advertisment/9f34ef72-615e-45e9-a182-ec0c670f63a6_zps7d960dc7.jpg") no-repeat;  background-position: center; background-size: cover;;';
        var buffet = 'url("http://i1037.photobucket.com/albums/a452/drmadvertising/Peninsula%20Papers/Peninsula%20Puzzles/HibachiGrillPuzz.jpg") no-repeat;  background-position: center; background-size: cover;;';
        var fastfood = 'url("http://i242.photobucket.com/albums/ff231/bour3/things%20I%20made%20then%20ate/hamburger.jpg") no-repeat;  background-position: center; background-size: cover;;';

        var options = [cafe, buffet, fastfood];
            for (var i = 0; i < options.length; i++)
                $("#test").attr("background", i);
                    $(function() {          
                        //Keep track of how many swipes
                        var count=0;

                        //Enable swiping...
                        $("#test").swipe( {
                            //Generic swipe handler for all directions
                            swipe:function(event, direction, distance, duration, fingerCount) {
                                if(direction=='left') {
                                    $('#choice').text("Not this one." );    
                                }
                                else if(direction=='right') {
                                    $('#choice').text('Glad you like it.');
                                }
                            },
                            //Default is 75px, set to 0 for demo so any distance triggers swipe
                            threshold:0
                        });
                    });
   });)

How can I get this code working?

Upvotes: 0

Views: 122

Answers (1)

Dean Meehan
Dean Meehan

Reputation: 2646

I found a different solution that works involving no loops (not sure why they where there) but it just uses a function when scrolled to move the image to the next in the array. Basically adding the following code to your first example. 

//Stripped CSS Styling leaving only URL
var cafe = 'http://i1360.photobuck...uzz.jpg';
var buffet = 'http://i1477.photobuck...erg.jpg';
var fastfood = 'http://i185.photobuck...grz.jpg';

var options = [cafe, buffet, fastfood];
var selectedoption = 0;

//Programatically set the first image
$('#test').css('background-image', "url('" + options[selectedoption] + "')");

Once the user swipes I increment the selectedoption (and if its on the last option return to start)

        if (selectedoption == options.length) {
            selectedoption = 0;
        } else {
            selectedoption++;
        }

then after your if(direction=="left") code block I added the code to change images

$('#test').css('background-image', "url('" + options[selectedoption] + "')");

Here is a working JSFiddle

I would also recommend preloading the images, as im sure you will realise they are taking time to load.

Upvotes: 1

Related Questions