alanmitchell 243 Share Posted November 15, 2012 (edited) Is it possible to create a gallery slideshow that fades between the images, rather than just changing to the next image? It looks a bit jerky how it is currently working. Edited August 9, 2013 by alanmitchell Simplify title lonestampede, lonestampede, kjrmedia and 7 others 11 Link to post
7 Suzie 252 Solution Share Posted March 12, 2013 (edited) 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 March 12, 2013 by Suzie Link to post
3 Alan-Squareflair 2,562 Share Posted October 7, 2013 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? Link to post
1 Nick Scola 1,457 Share Posted May 20, 2013 Flash is dead. Use jQuery sliders. 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 post
1 Alan-Squareflair 2,562 Share Posted October 7, 2013 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? Link to post
0 Salskov 0 Share Posted November 16, 2012 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 post
0 GRSM 1,516 Share Posted November 18, 2012 And is there any way to make each image in that slideshow a link to selected page..? X-Gen born digital. Food Enthusiast. Traveler. Link to post
0 Nick Scola 1,457 Share Posted November 18, 2012 Hopefully, this will be added in soon, but I would also LOVE a slide transition. 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 post
0 Guest Share Posted November 19, 2012 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 post
0 blueearthphoto 21 Share Posted January 13, 2013 I would like to see this option as well! Link to post
0 Timjim 118 Share Posted March 12, 2013 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!!! Link to post
0 Suzie 252 Share Posted March 12, 2013 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? Link to post
0 Guest Share Posted April 11, 2013 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 post
0 Nick Scola 1,457 Share Posted May 20, 2013 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 post
0 David1570047699 0 Share Posted June 5, 2013 Hi Suzie,Thanks for this, works great, but do you know how to have the images fade through one and another ?CheersDavid Link to post
0 Guest Share Posted August 16, 2013 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. Link to post
0 Tigerbright 12 Share Posted August 28, 2013 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 post
0 wowpages 0 Share Posted November 23, 2013 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 post
0 jack1570047694 565 Share Posted January 29, 2014 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/ Link to post
0 richpor1982 99 Share Posted October 13, 2014 is there any way to get pictures to fade into each other rather than fade to black first? Link to post
0 ScottPilgrim 0 Share Posted August 25, 2015 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 post
0 ScottPilgrim 0 Share Posted August 25, 2015 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 post
0 ArminB 1,966 Share Posted November 20, 2015 anyone archived a very smooth transition (would need that for relax products)? thanks a lot About Armin: Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084Porfolio: www.sqsp-expert.comAbout me: Squarespace Circle Interview Link to post
0 ChrisBeebe 0 Share Posted September 13, 2016 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. Link to post
Question
alanmitchell 243
Is it possible to create a gallery slideshow that fades between the images, rather than just changing to the next image? It looks a bit jerky how it is currently working.
Edited by alanmitchellSimplify title
Link to post
Top Posters For This Question
3
3
2
Popular Days
Mar 12
3
Nov 18
3
Mar 28
2
Aug 25
2
Top Posters For This Question
Nick Scola 3 posts
Alan-Squareflair 3 posts
ScottPilgrim 2 posts
Popular Days
Mar 12 2013
3 posts
Nov 18 2012
3 posts
Mar 28 2017
2 posts
Aug 25 2015
2 posts
31 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment