How to adjust transition speed (fade in/out) for the fading slider?

(12 posts) (4 voices)

1. 

   claussimonsen
   Member

   Hi,
   Is it somehow possible to adjust the speed with which the fading slider transitions from one image to another?

   I'm not referring to the 'Slider Transition Speed' which can easily be adjusted through the admin interface - a setting which effectively determines how long a given image is on display before being switched to the next one.

   For the 'inFocus' theme the speed of fading in/out between images can adjusted via the variable 'speed' in function cycleStart() in the 'custom.js' file.

   Therefore my first thought was that I would be able to do something similar with the Awake theme, but I soon realized that the underlying slider implementation is different between the two themes.

   I have looked through the files of the Awake theme to the best of my ability but I still haven't figured out a way. My guess would be the files 'custom.js' and 'sliders.js' would be involved, but still no luck.

   Hope you can help me out with a reasonable simple fix.

   Thanks in advance and thanks for some great WordPress themes.

   Best regards

   Claus

   Posted 1 year ago #
2. 

   Ruderic
   Support

   Hi,

   In the file "sliders.js", go to line #113.

   Try replacing:

   fadeOutSpeed: "slow",

   With something like:

   fadeOutSpeed: 200,

   The value "200" is set in milliseconds, so, since you already modified inFocus, you will probably know the duration you want to have.

   Hope that helps.

   Posted 1 year ago #
3. 

   claussimonsen
   Member

   Thanks for the swift response Ruderic.

   I had actually been tampering a little with 'fadeOutSpeed' already and you are perfectly right - it does the trick nicely.

   The reason I still decided to make a 'support request' was that although the 'fadeOutSpeed' parameter controls the fade transition from image to image it does not seem to affect the fade transition between the last and first image.
   As a consequence I now have a nice and slow fade transition between each image from the first to the last, but then when the slider rolls back from the last to the first image it is done with a much faster fade transition which does not match the other fade transitions.

   Is there a way to control the fade transition from last back to first image.

   Thanks in advance and best regards

   Claus

   Posted 1 year ago #
4. 

   Ruderic
   Support

   Hi,

   I am afraid that what I previously told you is all I know about this slideshow plugin.

   Why dont you visit the official page of the jQuery plugin, and leave a message in their forums? They will probably have an answer to your issue. This is the link: http://flowplayer.org/tools/tabs/slideshow.html

   Posted 1 year ago #
5. 

   claussimonsen
   Member

   Thanks again for the quick response.

   I will try looking more into the jQuery plugin - thanks for pointing me in the right direction with the link.

   Best regards and once again thanks for the support.

   Claus

   Posted 1 year ago #
6. 

   claussimonsen
   Member

   Hi again!

   Before you finally close the case I thought I would add my findings on the link you provided, just in case other newbie Awake / jQuery / slideshow users like me should find themselves searching the forum for answers to this issue.

   As it turns out introducing the parameter 'fadeInSpeed' in addition to the already present 'fadeOutSpeed' makes the level of control I was looking for possible. In my case I now have the following setting in my function 'fadingStart()' in file 'sliders.js':

   // enable "cross-fading" effect
   effect: 'fade',
   fadeOutSpeed: 2000,
   fadeInSpeed: 2000,

   // start from the beginning after the last tab
   rotate: true,

   Best regards

   Claus

   Posted 1 year ago #
7. 

   Ruderic
   Support

   Thanks for sharing the solution claussimonsen!

   Posted 1 year ago #
8. 

   MTField
   Member

   Hi,

   I'm trying to achieve the same thing and found this thread after a search but I don't appear to have the sliders.js file at "\wp-content\themes\awake\lib\scripts\sliders.js" .

   There's a "jquery.nivo.slider.js" file located there but no "sliders.js"

   I assume I'm using the upgraded version of the Awake theme. (v2.3)

   Can you advise as how to change the fadeoutspeed & fadeinspeed

   Many Thanks

   Posted 5 months ago #
9. 

   Elliott
   Support

   Hello MTField,

   If your using the latest version of our themes then you can change the animation speed in Dashboard -> your theme -> Slideshow in the advanced settings. http://mysitemyway.com/docs/index.php?title=Using_the_Sliders

   Posted 5 months ago #
10. 

    MTField
    Member

    Thanks for that but I'd like to slow it down a little more if I can and the slow option is a bit too fast. Is it possible to alter the value for slow somewhere in one of the files?

    Posted 5 months ago #
11. 

    Elliott
    Support

    Open up /wp-content/themes/[your_theme]/lib/functions/sliders.php and on line 533 you should see this,

    fadeInSpeed: '<?php echo mysite_get_setting( 'slider_fade_speed' ); ?>',

    Change it like this,

    fadeInSpeed: 1000,

    Posted 5 months ago #
12. 

    MTField
    Member

    That worked like a charm. Thanks!

    Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.