?
Solved

jQuery cycle caption

Posted on 2013-01-09
7
Medium Priority
?
417 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Docker-Compose to Simplify Multi-Container Builds

Our veteran DevOps Author takes you through how to build a multi-container environment, managed with a single utility in order to simplify your deployments.

 

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 2000 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

752 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