Search jQuery

jQuery Forum

Using jQuery Plugins

davidfwall

help - cycle.js return to first slide on mouseout

in Using jQuery Plugins • 11 years ago

Hi there,

I have a series of slideshows on a single page. They activate (independently) on mouseover.

At present, the slideshows pause on mouseout. I would like for each of them to return (paused) to the first slide instead. Ideally this return to the first slide would also be a fade transition.

The code in place at the moment is as follows:

<script src="/scripts/js/jquery.cycle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery').cycle({
fx: 'fade',
speed: 500,
timeout: 1600
});
$("div.gallery").cycle('pause'); //we pause the animation by default
$("div.gallery").mouseover(function(){
$(this).cycle('resume');
}).mouseout(function(){
$(this).cycle('pause');
});
});
</script>

I have a live test page which you can see here:

http://ciaranmurphy.ie/works/

Any help is greatly appreciated!

David

Replies(4)

malsup

Re: help - cycle.js return to first slide on mouseout

11 years ago

Change line #17 to:

$(this).cycle(0, 'fade').cycle('pause');

davidfwall

Re: help - cycle.js return to first slide on mouseout

11 years ago

Thank you malsup

I've done that (at the same page) http://ciaranmurphy.ie/works and it works. However the return to the first slide appears to be triggered by even the slightest movement. Ideally it would happen when the mouse has moved away from the .gallery div, for a more smooth transition.

Is there any way to perhaps combine cycle.js with hoverIntent? I realise that I may be going a little far here, and that I'm not exactly using cycle.js as was originally intended, but any help is appreciated!

thanks

David

malsup