Using multiple jquery cycles with touchwipe (swipe) events for ipad

Question

I've setup the cycle plugin to work multiple times on one page, which is all working fine. I'm trying to add a swipe event though, using the touchwipe plugin, which works fine on a single cycle carousel, but I can't get it to work on the multiples.

Here's my Javsacript, showing the Cycle code, plus the Touchwipe add on at the bottom:

function galleries () {     

    var counter = 1

    $('.gallery .pics').each(function() {
        $(this).parent().attr('id','slideshow_'+counter);
        $(this).before('<ul class="next-prev-nav"><li><a href="#" class="prev-'+counter+'">Previous</a></li><li><a href="#" class="next-'+counter+'">Next</a></li></ul><div style="clear:both;"></a>');
        $(this).after('<ul class="gallery-nav-'+counter+'">');
        $(this).cycle({
            fx: 'scrollHorz',
            speed:  '400', 
            timeout: '4000', 
            pager:  '.gallery-nav-'+counter,
            next: '.next-'+counter,
            prev: '.prev-'+counter,
            pause:   1,
            pauseOnPagerHover: true, 
            startingSlide: 0, // zero-based 

            pagerAnchorBuilder: function(id, slide) { 
                var s = $(slide);
                var imgsource = s.find('img.CycIMG').attr('src');

                // Set this as the source for our image
                return '<li><a href="#"><img src="' + imgsource + '" width="62" alt=""></a></li>';  
            }
        }).cycle('pause');
        $(this).touchwipe({
            wipeLeft: function() {
                $('.pics').cycle('next');       
            },
            wipeRight: function() {
                $(this).cycle('prev');
            }
        });
        counter++;
    });
}

The lines of code starting from $(this).touchwipe are what I can't get to work. I'm showing two different examples here. The "wipeLeft" function works, but as it is targeting a generic class ('pics'), it swipes all the carousels at once. The "wipeRight" function is how I'd like it to work, using "this", to target just the current cycle carousel in the loop. I've tried targeting the individual ID for each carousel I created at the start, but this doesn't seem to work.

Would really appreciate any help!

Next time, isolate your problem a little more (rather than including everything that is working). It will help you in your problem solving, it will make things easier for others to help you, and it will make a better resource for future readers with the same problem :) — Kevin C., Jul 16 '12 at 22:19

score 3 · Accepted Answer · answered Jul 16 '12 at 22:19

3

Try adding a context selector to your code:

$('.gallery .pics').each(function() {
    var parent = this.parentNode;

    /*...*/

    $(this).touchWipe({
        wipeLeft: function(){
            $('.pics', parent).cycle('next');
        }
    });
});

What this does is add "context" to your selector. It's similar to this: $(parent).find('.pics')

I'm actually working on the exact same situation as you, and I've tested it to work :)

answered Jul 16 '12 at 22:19

Kevin C.

2,499
1
27
41

Thanks for this Kevin, I solved it a different way, but yours is cleaner!! – Desmond Jul 18 '12 at 05:21
Thanks! A couple other notes: $.each() has its own counter, you don't need to create one yourself (see jQuery docs). Also, instead of using a counter at all to create unique IDs/classes for stuff like your next/pager elements, you can use the same context selector, like this: pager: $('.pager', parent) – Kevin C. Jul 18 '12 at 17:16
1

That's great to know, I've updated! Thanks again for your help, much appreciated! – Desmond Jul 31 '12 at 01:11

Using multiple jquery cycles with touchwipe (swipe) events for ipad

1 Answers1