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

How to slow down the fade transition in a 7.1 Gallery Slideshow


casson

Question

Hi,

The fade transition time between images in a 7.1 Gallery Section Slideshow is too abrupt. SS cannot assist as it requires code injection. Does anyone know of some code that will slow the fade down so there is a slow cross-fade effect between images? The code below works in 7.0 (in the page's CSS) but it doesn't work in 7.1 (Gallery Section inserted into a Blank Page).

Many thanks.

<style>
.slide { visibility: visible !important;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out; }
 </style>

Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi, The fade transition time between images in a 7.1 Gallery Section Slideshow is too abrupt. SS cannot assist as it requires code injection. Does anyone know of some code that will slow the fade

.gallery-fullscreen-slideshow-item-img{ transition: opacity 1600ms ease-in-out !important; -webkit-transition: opacity 1600ms ease-in-out !important; -ms-transition: opacity 1600ms ease-in-out !imp

Alright, so I poked around a bit more. It's hard to see whats really going on without being logged into your page, but something about it is set up differently than mine. Lets start with the basi

Posted Images

13 answers to this question

Recommended Posts

  • 0
On 11/21/2019 at 2:01 AM, casson said:

<style>
.slide { visibility: visible !important;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out; }
 </style>

Would love to see if anyone has been able to work this out. I'm not much of a code expert, at all, but I would really like to use this on a clients site if it can be done.

Link to post
  • 0
.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

.gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
	transition: opacity 1400ms ease-in-out !important;
	-webkit-transition: opacity 1400ms ease-in-out !important;
	-ms-transition: opacity 1400ms ease-in-out !important;
	-moz-transition: opacity 1400ms ease-in-out !important;
	-o-transition: opacity 1400ms ease-in-out !important;
}

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

Link to post
  • 0
12 hours ago, rwp said:

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

.gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
	transition: opacity 1400ms ease-in-out !important;
	-webkit-transition: opacity 1400ms ease-in-out !important;
	-ms-transition: opacity 1400ms ease-in-out !important;
	-moz-transition: opacity 1400ms ease-in-out !important;
	-o-transition: opacity 1400ms ease-in-out !important;
}

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

 

Hi @rwp thanks for your help! I tried to use your code on my website but it doesn't seem to be working.. The slow fading happens only when the gallery slideshow appears at page load but not when it flicks through the different images. 

Any chance you can have a look at it? The website is: https://villa-rondinelli.squarespace.com/home/it

Password: maggie-villa

Thanks!

 

Link to post
  • 0
Posted (edited)
6 hours ago, MaggieBovary said:

 

Hi @rwp thanks for your help! I tried to use your code on my website but it doesn't seem to be working.. The slow fading happens only when the gallery slideshow appears at page load but not when it flicks through the different images. 

Any chance you can have a look at it? The website is: https://villa-rondinelli.squarespace.com/home/it

Password: maggie-villa

Thanks!

 

Hey @MaggieBovary

Lets try this...... I commented out one part of the last line. That line can be removed is this works.

Edit: Also, if this doesn't work, try turning off the dots for the different images, I am not sure if that will matter, but if it does I will look into it.  There's like 300 lines of code for the slide show, so its a disaster to mess with.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

//.gallery-fullscreen-slideshow[data-transition="fade"] 
.gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
	transition: opacity 1400ms ease-in-out !important;
	-webkit-transition: opacity 1400ms ease-in-out !important;
	-ms-transition: opacity 1400ms ease-in-out !important;
	-moz-transition: opacity 1400ms ease-in-out !important;
	-o-transition: opacity 1400ms ease-in-out !important;
}

 

Edited by rwp
Link to post
  • 0
1 hour ago, rwp said:

Hey @MaggieBovary

Lets try this...... I commented out one part of the last line. That line can be removed is this works.

Edit: Also, if this doesn't work, try turning off the dots for the different images, I am not sure if that will matter, but if it does I will look into it.  There's like 300 lines of code for the slide show, so its a disaster to mess with.


.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

//.gallery-fullscreen-slideshow[data-transition="fade"] 
.gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
	transition: opacity 1400ms ease-in-out !important;
	-webkit-transition: opacity 1400ms ease-in-out !important;
	-ms-transition: opacity 1400ms ease-in-out !important;
	-moz-transition: opacity 1400ms ease-in-out !important;
	-o-transition: opacity 1400ms ease-in-out !important;
}

 

Tried both ways and still doesn't work 😞

Link to post
  • 0

I really have to say, so far I am tremendously disappointed with SquareSpace 7.1, its an absolute nightmare to do any customization, and basic things just don't work/aren't user adjustable.

Combing though 1000's of lines of CSS to change the speed of a slide show are crazy, especially when it doesn't work on a second slide show because a setting or two is different.

I've already spent about 4 hours today trying to get anchor links to work correctly because there are no more section ID's assigned when the page is generated.

Link to post
  • 0
9 minutes ago, rwp said:

I really have to say, so far I am tremendously disappointed with SquareSpace 7.1, its an absolute nightmare to do any customization, and basic things just don't work/aren't user adjustable.

Combing though 1000's of lines of CSS to change the speed of a slide show are crazy, especially when it doesn't work on a second slide show because a setting or two is different.

I've already spent about 4 hours today trying to get anchor links to work correctly because there are no more section ID's assigned when the page is generated.

That's true, I hope they can fix the 7.1 issues soon.. I'll definitely use 7.0 next time. Thanks a lot for your help anyway!

Link to post
  • 0
Just now, MaggieBovary said:

That's true, I hope they can fix the 7.1 issues soon.. I'll definitely use 7.0 next time. Thanks a lot for your help anyway!

I will try to check it out a bit more later on.  If I can get the anchor links fixed at some point today.

Link to post
  • 0

Alright, so I poked around a bit more. It's hard to see whats really going on without being logged into your page, but something about it is set up differently than mine.

Lets start with the basics, is it a gallery block?

If so, do your settings look like this?

Annotation 2020-05-01 113228.png

Link to post
  • 0
Posted (edited)
On 5/1/2020 at 10:22 PM, rwp said:

Alright, so I poked around a bit more. It's hard to see whats really going on without being logged into your page, but something about it is set up differently than mine.

Lets start with the basics, is it a gallery block?

If so, do your settings look like this?

Annotation 2020-05-01 113228.png

I've just adjusted that and it works!! Thank you so much @rwp 🙏🙏🙏

Edited by MaggieBovary
Link to post
  • 0

I agree the fading transition is too abrupt. I've tried the Custom CSS tweaks mentioned above but it doesn't consistently work. Sometimes the slower fade transition occurs but at random times it just changes images without a fade transition at all which isn't good enough.

This is the first time I've evaluated using SS for a site build but because of this I won't be using it for the next site I'm going to be working on.

Hopefully this issue is addressed in future.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...