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
Solved

Skitter Slider - Fade In & Out Time

Posted on 2015-02-17
12
182 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 29
Head to not include on scroll 4 23
ajax to record click 3 16
Ajax and PHP 9 29
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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 …
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…

840 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