Solved

jQuery cycle caption

Posted on 2013-01-09
7
411 Views
Last Modified: 2013-02-17
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
Comment
Question by:Refael
  • 4
  • 3
7 Comments
 
LVL 25

Expert Comment

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

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

Author Comment

by:Refael
ID: 38762598
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38762643
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:Refael
ID: 38762685
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38762794
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
 

Author Comment

by:Refael
ID: 38834626
Ok i will... just got very busy... i will post it here later. thank you.
0
 

Author Closing Comment

by:Refael
ID: 38899618
Great. Thank you.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question