Create a Gallery slideshow that FADES between images?

I just found this, and it seems to be working nicely. Increase the number for a slower transition.

.slide {
 -webkit-transition: opacity 2000ms ease-in-out;
    -moz-transition: opacity 2000ms ease-in-out;
      -o-transition: opacity 2000ms ease-in-out;
         transition: opacity 2000ms ease-in-out;
}

Echoing what @nick-scola suggested, but I'll put it in a question: WHEN is Squarespace going to make slideshows better by adding DISSOLVES to slideshows?

Flash is dead. Use jQuery sliders.

Echoing what @nick-scola suggested, but I'll put it in a question: WHEN is Squarespace going to make slideshows better by adding DISSOLVES to slideshows?

As I'm planning to change over to Squarespace, I too am very interested in this capability as it is a critical element in my present layout. The ability to change the duration of the fade in/fade out and the length of time the image remains static for viewing are equally important to the presentation.

Salskov

I'm interested too...

And is there any way to make each image in that slideshow a link to selected page..?

Hopefully, this will be added in soon, but I would also LOVE a slide transition.

Yes. When in the "Edit Gallery" menu, switch over to the "Content" tab. Hover over the image you'd like to add a link to and click the gear button. Now you're in "Edit Image." At the bottom of this menu you'll see a place to add a Clickthrough Link for that individual slide.

I would like to see this option as well!

Come on SS! The built in slideshow fade in transitions (on 5 and 6) are far too clunky. They are not elegant enough to be pleasing on the eye! Give some quality!!!

OK, so this code seems to disable the controls (arrows)— they (and the thumbnails are not clickable. Does anyone have ideas on how to make the above code compatible with autoplay while maintaining the ability to use the controls?

Eager to see more on this. Considering Squarespace is one of the most elegant solutions available for portfolio websites, the transitions available (and options or lack thereof for them) are quite jerky. Nothing smooth about them at all.

I'm not sure when Squarespace plans on releasing the "fade" transition on the consumer platform but I do for a fact you can do this. Was playing around with it in the developer platform.

Just hold on tight I guess.

Don't. Use.Flash.

Hi Suzie,Thanks for this, works great, but do you know how to have the images fade through one and another ?CheersDavid

STILL HOPING FOR THIS. It's kind of ridiculous this isn't operational yet, as it was a feature in 5 but is not in 6.

I'm having problems with my slideshow CSS code. Works great on IE and firefox but the slideshow doesn't show up at all in Chrome (new install). Any ideas?

I'm using Montauk template.

Here is the code I'm using:

.slide { -webkit-transition: opacity 2000ms ease-in-out; -o-transition: opacity 20000ms ease-in-out; transition: opacity 20000ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; webkit-transition: all 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -moz-transition: all 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -ms-transition: all 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -o-transition: all 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000); transition: all 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000);}

I added Suzie's code to my header, which worked well for the fade-ins, but the fade-outs were still abrupt. I added one line which helps with the fade-outs. The only problem I found was in Safari, where there are some minor jitter effects.

<style>
.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;
}
</style>

wowpages, that worked fairly well. However, does anyone know how to get the description to be synchronized with the images. I can't find the right selectors. Here's my page

https://jack-stull-owei.squarespace.com/

is there any way to get pictures to fade into each other rather than fade to black first?

Thank you Suzie! Here is another Ease-Out style of transition if you don't like how Ease-In-Out looks. I got this from this website: http://matthewlein.com/ceaser/, but had to base on Suzie's to get it to work for my site.

.slide { visibility: visible !important;-webkit-transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); /* ease-out */}

Here is another Ease-Out style of transition if you don't like how Ease-In-Out looks. I got this from this website: http://matthewlein.com/ceaser/, but had to base on Suzie's to get it to work for my site.

.slide { visibility: visible !important; -webkit-transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: opacity 2500ms cubic-bezier(0.000, 0.000, 0.580, 1.000); / ease-out / }

anyone archived a very smooth transition (would need that for relax products)? thanks a lot

Thanks, Suzie, and.... Can yo tell me where I need to put this code? I put it the Advanced code box for the Gallery, but there's no change in the transitions. I'm on Firefox, if that matters.