The Vegas and Galleria slide shows in Backlight have various configuration options. One option that is missing in both is a control to change fade time. That is, the total time it takes to fade from one image to the next.
(Note: since this was first posted, a Transition time slider has been added to Galleria for Backlight 2)
By default, that time looks to be set to about 1 second. But that may be too abrupt for some. To change that, you’re going to have to add to the code that generates the slide show. It’s not hard to do and isn’t even scary.
Changing the fade time in a Vegas slide show
Let’s tackle the Vegas slide show first.
For Backlight 1: In your Theater download, go to backlight/modules/pangolin-theater/fragments/. In the fragments folder look for the vegas_js.php file.
For Backlight 2: Since you no longer get a download for Theater, rather all modules are installed via the Backlight Modules page, you’ll first need to download the vegas_js.php file from your site.
Via FTP, navigate to /backlight/modules/pangolin-theater/fragments/ folder.
Open the vegas_js.php file with a plain text editor such as Notepad++ (Windows) or Text Wrangler (Mac)
On line 14 you’ll see:
transition: '<?php echo $model->value('presentation.vegas.transition') ?>',Create a new line after that and add this:
transitionDuration: 5000,In this code, 5000 means 5 seconds. Change this number to your liking. This setting will affect all Vegas transition types (fade, swirl, slide, etc).
Save the file (using the same name) to a different location than your download (someplace you’ll be able to easily find it again) and upload it to the corresponding location on the server. Whenever there are Theater updates you’ll need to re-upload that file to /backlight/modules/pangolin-theater/fragments/ on your server.
In Backlight, clear Template Cache. You may also need to clear browser cache to see the change.
You can change other settings that are not in the Backlight interface in the same way. Visit the Vegas documentation to see more settings.
Changing the fade time in a Galleria slide show
Since this first writing, this control has been added to the Galleria add-on for Backlight 2. You can still use this technique to add other options, such as randomizing:
dataSort: 'random'You can change the Galleria settings in a similar way as the Vegas settings.
For Backlight 1: In the Galleria download, go to backlight/modules/pangolin-galleria/dynamic/js/ and open the galleria-pangolin.php file in your text editor.
Add a line after line 61 (transition: ‘fade’,) to include this:
transitionSpeed: '3000',This sets the fade time to three seconds. Change as needed.
Note that different syntax is used in Galleria than in Vegas. In Galleria, the time value must be enclosed in single quotes.
For Backlight 2: via FTP, download the same file. Navigate to /backlight/modules/pangolin-galleria/dynamic/js
To change other options, see the Galleria documentation on using options. There’s a link on that page to all the options.
As with Vegas, save this file (using the same name) in a location that you can find it and then upload it to its corresponding location on the server.
Clear your template cache (and perhaps your browser cache) to see the changes.
Hello Rod, thanks for the tip. I’ll give it a try.
Did you manage the smooth transitions of the photos at the Vegas slideshow on your Pangolin test page http://pangolin.barbeephoto.com/galleries/theater-testing/vegas-inline-or-coast/ with such an options? Or do you control it with your custom CSS?
I haven’t found any such option on their side.
In your custom CSS with the Inspector I found something that doesn’t work at least in the form.
I like the transitions extraordinarily well
Sunny greetings
Markus
it’s just from the transition duration time that I changed in the vegas-js.php code (changing the fade time to 5 seconds). No css involved.
There might me a lot of things in my custom css that don’t work; it’s all for testing, really.
Hello Rod,
I am trying to duplicate the transitions in your demo slide show, but even after altering the vegas_js.php file as suggested above, I still had a 5 or 6 sec duration followed by a 1 second crossfade. Then I tried a line of code lifted from your site with the help of the Inspector:
transition: ‘value(‘presentation.vegas.transition’) ?>’,
/*firstTransitionDuration: 6000,
transitionDuration: 6000,*/
transitionDuration: all 5000ms ease 0s;
slides: [echo $slides],
Notice that I commented out the First TransitionDuration and the transitionDuration lines in order to try the lines from your demo. Anyway, no change.
I am using the Vegas Slide Show for the home page of: https://pideja.ca
Did you remember to clear template cache?
I use three different browsers: on CHROME, I have Backlight (I use a text editor to edit the Vegas_js file). I then check the results on Firefox, Brave and sometimes Safari or Chrome. So, I thought that clearing the browser cache but I did not think of template cache. You were right, of course. I also ditched the line of code lifted from your test page and reverted to the original lines I had edited:
transition: ‘value(‘presentation.vegas.transition’) ?>’,
firstTransitionDuration: 6000,
transitionDuration: 6000,
Now I have much smoother cross-fades.
Thank you.