Solved

Skitter Slider - Fade In & Out Time

Posted on 2015-02-17
12
192 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
[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
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 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…

730 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