Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
mop1570047754

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

Question

Recommended Posts

  • 15

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>

Edited by jjdb210

Share this post


Link to post
  • 1

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).

Share this post


Link to post
  • 1

@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!

Share this post


Link to post
  • 1

Hi,Thanks @jjdb210 so much for the script. Works great !I would like to go further and control not only the duration of the display but also the speed of the cross-fade itself.Is there an easy way to add this option? I feel that it's too fast as is.

I have a similar option with css to slow down the transitions in my main website galleries:


.slide {
   visibility: visible !important;
   -webkit-transition: opacity 3s ease-in-out;
   -moz-transition: opacity 3s ease-in-out;
   -o-transition: opacity 3s ease-in-out;
   transition: opacity 3s ease-in-out;
}

So I guess it could be the equivalent coded in javascript ? What do you think?

Thanks !!

Edited by palosanto

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Edited by cindy94

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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…

Edited by sssuperguy

💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post
  • 0

@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/

Share this post


Link to post
  • 0

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.


💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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


💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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


💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post
  • 0

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;};

Share this post


Link to post
  • 0

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)

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...