Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Skitter Slider - Fade In & Out Time

Posted on 2015-02-17
12
Medium Priority
?
222 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
How To Install Bash on Windows 10

Windows’ budding partnership with Canonical has certainly led to some great improvements. One of them being the ability to use Bash on your Windows machine without third party applications! This might be one of the greatest things a cloud engineer in a Windows environment can do!

 

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

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

671 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