How do I implement jQuery image cycle loops on rollover for multiple thumbnail sets on a page?
- by Kendrick Ledet
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.
