How can I change the speed of a Cover Page slide show?

Hi there,

does anyone know how to customize the speed of the slideshow (that is how many seconds each image will be shown) which is running when I upload more than one image in the "imagery" section ?

thanks.

I completely agree.

I know the cover pages are supposed to be simple and static but the slideshow moves WAY to fast.

www.rockreachhouse.com

See how it just feels too fast?

SQUARESPACE PLEASE ADD THIS OPTION!!

Or any CSS wizards out there have any suggestions?

Great question. I tried downloading the developer files for the cover pages... no luck. I would guess that it would be in the script files somewhere that no one seems to have access to yet (as far as I know).

@McLean25 Thanks for digging deeper. This simple option seems like a modest request for SS to honor. Right @eanderson?

Update: I've sadly switched to only one photo as the slideshow moves too damn quickly.

www.rockreachhouse.com

Update #2: I gave up on a sweet cover page for www.rockreachhouse.com.

You let me down @eanderson.

HI @BradKlopman

I was looking for a solution for this as well, and being unable to find one, I created aJavaScript hack that got the job done. This can be inserted via the advanced tab code injection section to allow you to tweak the speed at which images transition:

<script>
window.oldSetTimeout = window.setTimeout;
window.setTimeout = function(code, delay) {
 if (delay == 5000) {
   delay = 2500;
 }
 var retval = window.oldSetTimeout(code, delay);
 return retval;
};
window.oldSetInterval = window.setInterval;
window.setInterval = function(code, delay) {
 if (delay == 5000) {
   delay = 2500;
 }
 var retval = window.oldSetInterval(code, delay);
 return retval;
};
</script>

Thanks for this man. I really appreciate it.

@BradKlopman - I took a quick look at the homestead modern page and I could see the code in there... I think the reason it's not working for you is the delay==5000 was changed to delay==1000. I believe both of those need to be left at 5000 as it's basically changing the 5000 to whatever value you put in instead (5000 = 5 seconds).

Hope that helps!

After I posted my comment I looked over the code again and realized my mistake and changed it so it worked! I then edited my comment and your email must have only showed the first one I wrote.

I seriously can't thank you enough man. You rock.

Hi @jjdb210

I am using your code in my site to control the length of time my slideshow images are being displayed in my cover pages.

I am running into a bit of a problem and it would be great if you could help. I am using 5 second GIFs in the slideshow and would like to have them up on the screen for exactly 5 seconds before dissolving.

I have used different numeric values for the delay but can’t get the GIF on screen for exactly 5 seconds, the dissolve stops the screen time and also pulls frames from the previous GIF. Do you have any suggestions?

@cindy94 - I don't believe their is a solution to your problem. The issue comes in with javascript timing vs GIF timing. Javascript timing is generally not "atomic" (GIF isn't either I believe) or syncable, and thus, 5 seconds to a GIF is not the same as 5 seconds to the javascript. They're close, but will never be synced perfectly... and will eventually get out of sync even if they are at the start. To make matters worse, I don't believe there is a way to control the gif animation from within javascript. There might be an alternative option using CSS sprites, but it'd be tricky.

@jjdb201

Could you tell me how to customize the speed for standard gallery slide shows?

Hi there, I am sort of new to this. So please be patient if this is a really novice question.

In the script:

if (delay == 5000) { delay = 2500;

Does 5000 refer to 5 sec , and so changing it to delay=2500 means 2.5 secs?

So this whole script makes the transition on the cover page images faster?

Thanks in advance for clarifying. I'd appreciate the help.

Hi there, I am sort of new to this. So please be patient if this is a really novice question.

In the script:

if (delay == 5000) { delay = 2500;

Does 5000 refer to 5 sec , and so changing it to delay=2500 means 2.5 secs?

So this whole script makes the transition on the cover page images faster?

Thanks in advance for clarifying. I'd appreciate the help.

@bluespainter: your question is more than legit but unfortunately @BradKlopmans happy exclamation marks lead into a false direction.
You may sense some kind change after inserting the code but it's just YOUR browser.
After you save refresh and view there's the same speedy gallery like before.

( Don't be fooled by the CoverPage of one of the participants of the Urban Outfitters® and Squarespace® Dreamers and Doers Start-Up Contest - they pimped it in a way that makes me sad. That CoverPage runs with 3.5 seconds delay, but if I create one on that same template (sorry folks, it's a trial) it speeds up to 2.0 seconds delay. Will anybody explain us how they did that ? No. They say you can't.

Squarespace prays water and drinks wine.

As Squarespace-uber-guru Eric 'Esquareda' @eanderson says here, there is no way to do this.
Period.

It's the Apple - sorry - Squarespace way of telling us where to go, how to behave, what to eat.
And it's the only way to get style into the masses and design into the websites of the rest of us.
I really wished SO MUCH I could at least give COVER PAGES tiny html-tweaks - just a little rich text, slide show timing, maybe just ONE custom block to place within the layout.

But that's their quit and maybe it's the right and only way to survive in the long run.
Oooommmm…

@bluespainter - You are correct that the numbers correspond to ms... so 5000ms equals 5 seconds (roughly). Browsers can be a little bit hinky about timing though...

That said, the 5000 in my code above MUST match the timing setting of the original slideshow. In this case, I believe 5000 is the most common value for this. In most cases, this value should not be changed. If the them is using a value faster than 5000 (I think there might be some on a delay of 2000ish... then you would need to find the proper value and change it).

The second value (2500) is the one that you would want to change. That's the value the slideshow becomes. So in my example, I changed the default timing of 5 seconds, to 2.5 seconds.

Again, in principle, what we are doing is telling the browser to treat any function call for "5 seconds" as "2.5 seconds". It does require the browser to allow this (most, if not all do).

@sssuperguy - The code I wrote does work. It's a hack, and I fully agree SquareSpace should make this value much easier to change. But it does get the job done. Here's my example (was 5 seconds, now 2.5 seconds): http://www.bachnerco.com/

The Cover Page I created myself in the example above carries your unchanged code in the correct sections but it's still as fast as before. %/ Haha, and when I watch your bachnerco CoverPage (thanks!) it plays with regular speed onethousandone-onethousandtwochange onethousandone-onethousandtwochange… on Chrome, Safari and Firefox.

If your counting to 2, and seeing it change, then it's doing what it should... The original timing on bachner had been 5 seconds.

OK, sounds good. %) In fact, the original timing ( I removed vour code from my above example now ) sems to be 2.5 seconds. Since I tried all kinds of values, what would I have to place into the code to get a SLOWER timing, let's say 5 seconds? This would be much better for my CoverPage because the pictures are not easy to 'read'. Thank you for your answer. *SSS

Can you link me to your existing cover page that is to fast. I can pull the timing that is in there out, and provide you with correct code.

Yes, with pleasure - of course I don't want to place my password here. May I send it to info [at] bachnerco.com ? You have a very nice Mario costume in your profile, but no email address… %)Because the slideshow pics need more time to grasp I want to set an interval of let's say 8 seconds on https://lokalplanet.squarespace.com

No need to send logins:

window.oldSetTimeout = window.setTimeout;window.setTimeout = function(code, delay) { if (delay == 5000) { delay = 8000; } var retval = window.oldSetTimeout(code, delay); return retval;};window.oldSetInterval = window.setInterval;window.setInterval = function(code, delay) { if (delay == 5000) { delay = 8000; } var retval = window.oldSetInterval(code, delay); return retval;};

Thanks for the replies jjdb210, I'll try it! Another novice question. Where do you put the code? Where is this advanced tab section for the cover page? ( I only know where it is for the gallery pages)

I added it into the advanced code injection section of the cover page and there is no effect. %(