• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

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

0
Refael
Asked:
Refael
  • 4
  • 3
1 Solution
 
Kyle HamiltonData ScientistCommented:
in the latest jquery, calling .stop() with no parameters -( which are false, false by default ) acheives this effect.

http://api.jquery.com/stop/
0
 
RefaelAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
RefaelAuthor Commented:
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

0
 
Kyle HamiltonData ScientistCommented:
OK, can you at least post the html so we can replicate the slideshow to see what's going on? You have a lot of repetitive code which could be rewritten, in turn making it easier to implement other functionality, such as a pause button.

If you want to try a quick and dirty fix, you could do something like this inside each if statement:

if (opts.currSlide == 2) {
			 captionSlide3.delay(200).animate({opacity: 1, right:120}, 2000).delay(3200).animate({opacity: 0}, 2000);	 
                        $("#pause").on("click", function(){
                        captionSlide3.stop(); 
                        })

		     }

Open in new window


I suspect this is not going to be what you want. You have some animations going on in the anAfter function, as well as the next/prev button clicks. I really need to see what's really happening.
0
 
RefaelAuthor Commented:
Ok i will... just got very busy... i will post it here later. thank you.
0
 
RefaelAuthor Commented:
Great. Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now