Solved

jQuery cycle caption

Posted on 2013-01-09
7
409 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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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)

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now