How do I implement jQuery image cycle loops on rollover for multiple thumbnail sets on a page?

Question

Here is the Javascript I currently have

<script type="text/javascript">
$(function() {
    $('.slideshow').hover(
        function() { $('.slides').cycle('resume'); },
        function() { $('.slides').cycle('pause'); }
    );

    $('.slides').cycle({
        fx:     'fade',
        speed:   .3,
        timeout: 280,
        next:   '#next',
        prev:   '#prev'
    }).cycle("pause");
});
</script>

It works; but the thing is it works for all thumbnail sets on the page, and whenever I mouseover on one set of images, every other set of images loops as well.

I do see that this is because I'm targeting classes, but my jQuery experience is quite limited so I have no idea how to only target a single instance of each class without effecting the others, and I can't go in and hardcode id's because my thumbnails and amount of videos on each page are determined dynamically via this Django template.

http://pastebin.com/nf42bSAx

I would greatly appreciate any help, as this is essential for my project (open source media platform).

Thank you.

Answer 1

You should only call cycle on the slides within the current slideshow, so call something like:

$(".slideshow").each(function() {
    $(this).find(".slides").cycle({
        fx:     'fade',
        speed:   .3,
        timeout: 280,
        next:   '#next',
        prev:   '#prev'
    }).cycle("pause").end().hover(
        function() { $(this).find('.slides').cycle('resume'); },
        function() { $(this).find('.slides').cycle('pause'); }
    );
});

Note that I have not used (or even heard of) this function before today but logically this should do what you want it to do.