Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

Skitter Slider - Fade In & Out Time

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
petewinter
Asked:
petewinter
  • 7
  • 5
3 Solutions
 
Robert SchuttSoftware EngineerCommented:
I think you should use the "interval" option.
0
 
petewinterAuthor Commented:
The "interval" option is for how long it stops on each image, not the fade in / out time.
0
 
Robert SchuttSoftware EngineerCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
petewinterAuthor Commented:
Yes, but the velocity option doesn't seem to do anything when using the fade in / fade out animation.
0
 
Robert SchuttSoftware EngineerCommented:
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
 
Robert SchuttSoftware EngineerCommented:
with velocity 0.1 I can see a definite much slower animation.
0
 
Robert SchuttSoftware EngineerCommented:
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
 
petewinterAuthor Commented:
Thanks for the example. I see it works for you. Any idea why it is not working for me?

http://bit.ly/1AhLo0S
0
 
Robert SchuttSoftware EngineerCommented:
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
 
petewinterAuthor Commented:
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
 
Robert SchuttSoftware EngineerCommented:
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
 
petewinterAuthor Commented:
Thanks for your help and advice.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now