jQuery cycle plugin customizing
- by spirax
I'm using the jQuery Cycle plugin to start a slidshow of images when hovering over the initial image. This works fine. What I want after that is to have the slideshow stop when hovered off, and have a manual slideshow (next/prev buttons) start. This currently works, but the slideshow starts from the beginning each time it's initialized. I want it to begin at the current image that's loaded.
I was playing around with getting the image's index from the DOM (as it's the only one with display:block) and using the option 'startingSlide' to resume it, but my index keeps returning as -1.
jQuery('#home-menu li').hover(function()
{
setImages(jQuery(this).attr('title'), jQuery(this).find('.subtitle').text());
jQuery('#main .blog #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
easing: 'easeOutBounce',
speed: 2000,
delay: 0
});
}, function()
{
// Before loading the images for the clickable slideshow, find the current image in the DOM array to use as the starting position
slideshowStart = jQuery('.gallery .slideshow img:visible').index(this);
console.log('Index: ' + slideshowStart);
setImages(jQuery(this).attr('title'), jQuery(this).find('.subtitle').text());
jQuery('#main .blog #projects .gallery .slideshow').cycle('stop').cycle(
{
fx: 'scrollHorz',
easing: 'easeOutBounce',
startingSlide: slideshowStart,
speed: 2000,
timeout: 0,
next: "#main .blog #projects .gallery span.span2",
prev: "#main .blog #projects .gallery span.span1"
});
});
setImages() just loads images into the DOM based on what li is being hovered over. Nothing special there.
I want the image to be resumed when hovered over and hovered off. I've left out the resume part for hover on for the moment while I was trying to get it working - In case you were wondering.
