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

Create a Gallery slideshow that FADES between images?

Question

Recommended Posts

  • 7

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

Edited by Suzie

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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>


Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


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