C5 slideshow -- Is there a way to delay the slideshow, using multiple slideshow blocks,

Permalink 1 user found helpful
I'm currently testing some options, and one that I really want to do is set up a grid (3x1 atm) and have each separate block timed to switch the image in alternating orders.

I've tried timing the image durations, but eventually they will overlap and 2+ images will swap simultaneously.

I don't see a delay type of field for the slideshow to start the first image duration until after the set delay, which I think would be quite handy. Is there a work-a-round?

aacscomputers
 
Remo replied on at Permalink Reply
Remo
I don't think that's possible out of the box, are you familiar with JavaScript?
aacscomputers replied on at Permalink Reply
aacscomputers
I've got some basic knowledge unfortunately (better than none). I really need to find the time to learn more. But any help would be greatly appreciated.
jordanlev replied on at Permalink Reply
jordanlev
There are a few ways to go with this, but I think the easiest and quickest (assuming this is a one-off thing you only want to do for 1 site) is to create a few different custom templates for the slideshow block, each one starting the slideshow at a different time.

Here's how you can do it:

* Create a new directory on your server:
YOURSITE/blocks/slideshow/templates/


* Copy this file:
YOURSITE/concrete/blocks/slideshow/view.php

... to the new directory you created above, and rename it to "view_delay_1.php".


* Copy that same file to the same destination again, and this time rename the new copy to "view_delay_2.php".

* Edit "view_delay_1.php", find this line (should be around line #100):
$(function(){ccmSlideShowHelper<?php echo intval($bID)?>.init();});

and change it to this:
$(function(){setTimeout(ccmSlideShowHelper<?php echo intval($bID)?>.init(), 333);});


* Next, edit "view_delay_2.php", find that same line, and change it to this:
$(function(){setTimeout(ccmSlideShowHelper<?php echo intval($bID)?>.init(), 666);});


* Log in to your site and enter "edit mode" for the page with the 3 slide shows. Click on the 2nd slideshow and choose "Custom Template" from the popup menu, and pick "View Delay 1" from the list, then click Save. Now click on the 3rd slideshow and choose "Custom Template" from the popup menu, and pick "View Delay 2" from the list, then click Save.

* Now, you have 3 different templates for the slideshow. One is the normal one which starts right away. "View Delay 1" starts 1/3 of a second after the original one, and "View Delay 2" starts 2/3 of a second after the original. If you want the starting delay to be longer, change the numbers "333" and "666" in the above code to the number of milliseconds (so 500 is half a second, 1000 is 1 second, etc.). Make sure the numbers aren't the same as the fade duration you set for each slideshow image, though -- because if you set the first slideshow to wait 2 seconds before it changes and set the second slideshow to start "2000" milliseconds in, it's going to start at the same exact time that the first slideshow changes!

Good luck.

-Jordan
aacscomputers replied on at Permalink Reply
aacscomputers
I'll try this and see how it goes, looks simple enough. Thanks! :)