Solved

Skitter Slider - Fade In & Out Time

Posted on 2015-02-17
12
165 Views
Last Modified: 2015-03-05
I am using the Skitter Slider: http://www.skitter-slider.net

However I can't seem to change the image fade in and out time.

http://www.skitter-slider.net/documentation

I thought it would be the "velocity" option, but nothing changes when changed.

I have also gone into the code and changed the below settings:

// Interval animation hover elements hideTools 
		interval_in_elements:	200, 

		// Interval animation out elements hideTools
		interval_out_elements:	300, 

Open in new window


but this doesn't seem to do anything either.

Any idea what I need to do?
0
Comment
Question by:petewinter
  • 7
  • 5
12 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40614011
I think you should use the "interval" option.
0
 

Author Comment

by:petewinter
ID: 40614047
The "interval" option is for how long it stops on each image, not the fade in / out time.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40614062
Oh sorry I misread the question, velocity could be correct, did you see valid values are 0 thru 2? Maybe try 0.1 or 1.9, it's not really clear in the doc how it works...
0
 

Author Comment

by:petewinter
ID: 40614126
Yes, but the velocity option doesn't seem to do anything when using the fade in / fade out animation.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40614158
ok, I thought maybe you had tried milliseconds there. I would expect it to be part of the easing settings, I'll have another look.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40614185
with velocity 0.1 I can see a definite much slower animation.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 500 total points
ID: 40614283
I've put my test code with velocity 0.1 online: http://schutt.nl/ee/Q_28618317/

You can even go 0.01 but then it takes really long...
0
 

Author Comment

by:petewinter
ID: 40614304
Thanks for the example. I see it works for you. Any idea why it is not working for me?

http://bit.ly/1AhLo0S
0
 
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 500 total points
ID: 40614328
It seems the new image is not showing until the fade in is already done. The 'dot' has advanced long before that, so I guess the interval and fade times are not playing nice with each other. It must of course have something to do with a difference in our options but which one and will knowing that be helpful as for example you have turned off the progressbar for good reason, I assume you just don't want to see it. Nonetheless, it might be why it's not working.

By the way, the images you're using make it real hard to see what's going on, maybe just for testing replace them with the skitter test images?

Another possibility is that other classes applied to the divs and/or images are causing this. It's probably easiest to try and start with a simple page, then add in scripts and styles you need until it looks good or it breaks, in which case you know where the problem is.

Another option is of course to choose another of the many available sliders, assuming you're not hung up on this one?
0
 

Author Comment

by:petewinter
ID: 40618590
Hi Robert. Thanks for your help. I noticed even on your version when the velocity is set to be slow you can not swap quickly between images. i.e. Try clicking a few of the dots quickly. I understand this is due to the animation needing to catch up. However do you know I can edit the script  so if a dot is clicked it changes instantly with no animation, but if the slider is using the auto play setting it keeps the fade time the same? Hope that makes sense.
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40619055
Well I found a way to change the code partly but when I took it a step further I broke it :-(

In jquery.skitter.js (don't forget to change the html to use this one instead of the minified version) I changed the block starting on line 518 to:
				this.box_skitter.find('.image_number').click(function(){
					if ($(this).attr('class') != 'image_number image_number_select') {
						var imageNumber = parseInt($(this).attr('rel'));
						//self.jumpToImage(imageNumber);

						self.settings.elapsedTime = 0;
						self.box_skitter.find('.box_clone').stop();
						self.clearTimer(true);
						self.settings.image_i = Math.floor(imageNumber);
						
						self.box_skitter.find('.image a').attr({'href': self.settings.link_atual});
						self.box_skitter.find('.image_main').attr({'src': self.settings.image_atual});
						self.box_skitter.find('.box_clone').remove();

						self.nextImage();

					}
					return false;
				});

Open in new window

so I copied and changed the code from the jumpToImage() function and took out the check for "is_animating". Live example here: http://schutt.nl/ee/Q_28618317/index2.htm

Next step I thought would be to do the same for nextImage() but like I said, when I tried it, it broke.

I'll get back to you on taking this a step further but probably not today.

In the meantime I still wonder if there would not be another slider plugin that does this "off the shelf"?
0
 

Author Closing Comment

by:petewinter
ID: 40646604
Thanks for your help and advice.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

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 …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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…

743 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

12 Experts available now in Live!

Get 1:1 Help Now