Jump to content

Create a Gallery slideshow that FADES between images?

Recommended Posts

  • Replies 31
  • Created
  • Last Reply

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

Link to comment

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.

Link to comment
  • 1 month later...
  • 1 month later...

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

Link to comment
  • 5 weeks later...

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.

Link to comment
  • 1 month later...

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.

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment
  • 2 weeks later...
  • 2 months later...
  • 2 weeks later...

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

Link to comment
  • 1 month later...
  • 1 month later...

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>


Link to comment
  • 2 months later...
  • 8 months later...
  • 10 months later...

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 */}

Link to comment

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

Link to comment
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.