asked on

jQuery cycle caption

Hello Experts,

I have attached the entire code of a jQuery cycle plugin slideshow.
The issue is that i need to add a pause button where it has the "next" and "prev".

The problem is that i am using animate opacity on the photos captions (in and out slides).
I am trying to find out how to catch the pause click and then to stop the caption animation from fading out "(animate({opacity: 0}, 2000)" and then when click next or previous it should continue the script. I hope its clear.

THIS IS THE SLIDESHOW SCRIPT

$('#full-slideshow').cycle({
	fx:'scrollHorz',
    	timeout:2500,
    	speed:2500,
	delay:2000,
	cssBefore:{opacity: 0.1},
        animOut:{opacity: 0.1},
        animIn:{opacity: 1},
	easing:'easeInOutSine',
	next:'#next', 
        prev:'#prev',
	after:onAfter		
});

Open in new window

THIS IS THE ONAFTER FUNCTION

function onAfter (curr,next,opts) {	   
		 var Left = $(opts.prev);
		 var Right = $(opts.next);
		 var index = opts.currSlide;
		 index == 0 ? Left.css('visibility','hidden') : Left.css('visibility','visible');
		 index == opts.slideCount - 1 ? Right.css('visibility','hidden') : Right.css('visibility','visible');
		  		 		 
		 var captionSlide1 = $('.caption-slide1');
		 var captionSlide2 = $('.caption-slide2');	
		 var captionSlide3 = $('.caption-slide3');
		 var captionSlide4 = $('.caption-slide4');	 
		 var index=opts.currSlide;
		  
		 if (opts.currSlide == 0) {
			 captionSlide1.delay(200).animate({opacity: 1, right:120}, 2000).delay(4200).animate({opacity: 0}, 2000);	 
		     }
		 if (opts.currSlide == 1) {
			 captionSlide2.delay(200).animate({opacity: 1, right:120}, 2000).delay(3200).animate({opacity: 0}, 2000);	 
		     }	
		 if (opts.currSlide == 2) {
			 captionSlide3.delay(200).animate({opacity: 1, right:120}, 2000).delay(3200).animate({opacity: 0}, 2000);	 
		     }
		if (opts.currSlide == 5) {
			 captionSlide4.delay(200).animate({opacity: 1, right:120}, 2000).delay(3200).animate({opacity: 0}, 2000);	 
		     }		
};

Open in new window

THIS IS THE NEXT AND PREV BUTTONS

$('#slidesNav a').click(function() {	
		$('.caption-slide1').stop(true, true).animate({opacity: 0}, 2000);
		$('.caption-slide2').stop(true, true).animate({opacity: 0}, 2000);
		$('.caption-slide3').stop(true, true).animate({opacity: 0}, 2000);
                $('.caption-slide4').stop(true, true).animate({opacity: 0}, 2000);
});

Open in new window

Kyle Hamilton

in the latest jquery, calling .stop() with no parameters -( which are false, false by default ) acheives this effect.

http://api.jquery.com/stop/

Refael

ASKER

Hi kozaiwaniec

Did you have a look at my code and the if statements? the stop function is not the problem. the problem is how to integrate it with the code. Please have a look at my code above. Thanks.

Kyle Hamilton

no, it's not the problem, its the solution. if you want to pause an animation mid stream you can call the stop() function on it.

it would be a lot easier to help you if you provided a link to your page

Refael

ASKER

let's say i have a pause button with an id "pause".
now when the user click on the pause while he is viewing slide3/captionSlide3 how/where should i integrate the stop and then the continue? It might be easy for you but not more me :-) i would be thankful if you can direct me.

if (opts.currSlide == 2) {
			 captionSlide3.delay(200).animate({opacity: 1, right:120}, 2000).delay(3200).animate({opacity: 0}, 2000);	 
		     }

Open in new window

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Refael

ASKER

Ok i will... just got very busy... i will post it here later. thank you.

Refael

ASKER

Great. Thank you.