inkhartz Posted April 27, 2020 Share Posted April 27, 2020 Site URL: http://www.inkhartz.com I would like my images to fade more slowly into/out of each other. I can't find any code that does anything. Can someone please help? Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 I solved this for a client. Will find the code I have used again. MartyNZ 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
inkhartz Posted April 28, 2020 Author Share Posted April 28, 2020 11 minutes ago, tuanphan said: I solved this for a client. Will find the code I have used again. Please let me know, I really need this !! Link to comment
inkhartz Posted May 1, 2020 Author Share Posted May 1, 2020 On 4/27/2020 at 7:11 PM, inkhartz said: Site URL: http://www.inkhartz.com I would like my images to fade more slowly into/out of each other. I can't find any code that does anything. Can someone please help? Has anyone founda solution? Link to comment
PxTn Posted June 19, 2020 Share Posted June 19, 2020 I have a Custom CSS solution using animation. I only used this on version 7.0, so not sure if it works on 7.1. Also, this code is heavily dependent on the number of slides, so you'll have to tweak it for the number of slides you have. If the number of actual slides changes but you don't change the code, your slideshow should revert back to the default, which is better than breaking completely. Disclaimer: this is a css hack, so use at your own risk! 🙂 The sample code below rotates 5 slides every 7 seconds with 2 seconds of crossfade transition: 1. Override the default javascript animation which manipulates opacity, visibility, and z-index. Change "nth-last-child(5)" selectors to the number of slides you have: .sqs-gallery-design-stacked-slide:first-child:nth-last-child(5), .sqs-gallery-design-stacked-slide:first-child:nth-last-child(5) ~ .sqs-gallery-design-stacked-slide { visibility: visible !important; opacity: 1 !important; z-index: auto !important; } If you're not familiar with the selectors above, read this. 2. Add a looping animation to each slide IMG tag. 35s is the duration it will take to display all the slides (5 slides * 7s) before starting over. 0s, 7s, etc are the delays before each slide begins to fade in. Be sure to change these values for your number of slides and preferred timing. .sqs-gallery-design-stacked-slide:nth-child(1):nth-last-child(5) img { opacity: 1; animation: xfade 35s linear infinite forwards 0s; } .sqs-gallery-design-stacked-slide:nth-child(2):nth-last-child(4) img { opacity: 0; animation: xfade 35s linear infinite forwards 7s; } .sqs-gallery-design-stacked-slide:nth-child(3):nth-last-child(3) img { opacity: 0; animation: xfade 35s linear infinite forwards 14s; } .sqs-gallery-design-stacked-slide:nth-child(4):nth-last-child(2) img { opacity: 0; animation: xfade 35s linear infinite forwards 21s; } .sqs-gallery-design-stacked-slide:nth-child(5):nth-last-child(1) img { opacity: 0; animation: xfade 35s linear infinite forwards 28s; } 3. Add the animation keyframes. 0% is intentionally empty so that the first image appears without fading in. 5.714% is the 2s mark (of 35s) when fade-in is complete. 20% is the 7s mark when the slide should begin fading out. 25.714% is the 9s mark when fade-out is complete. @keyframes xfade { 0% { } 5.714% { opacity: 1; } 20% { opacity: 1; } 25.714% { opacity: 0; } 100% { opacity: 0; } } Hope this helps someone. Good luck! Link to comment
SacredEcology Posted February 8, 2021 Share Posted February 8, 2021 I would also like to slow down the image fading transition on the gallery slideshow in v7.1. Link to comment
jenniferboddam Posted July 30, 2021 Share Posted July 30, 2021 I'm looking for a way to have an instant switch on the images for my slide show, right now there is an overlap of the previous image and its messing it up, is there a way to get rid of the delay? Link to comment
MinerMan2022 Posted April 15, 2022 Share Posted April 15, 2022 Hi @tuanphan we have a client wanting a similar edit made to their slideshow as well. Would you mind sharing the code you had from your previous client and sharing with us? Below is the link for your reference. https://carrot-saffron-4yb4.squarespace.com/ The password to view is DoveLove2022! Thank you. Link to comment
MartyNZ Posted April 18, 2022 Share Posted April 18, 2022 (edited) This worked for me. Although, not straight away. I pasted the code in, then had to add another gallery image block, refresh the browser then worked. .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 April 18, 2022 by MartyNZ Link to comment
Dovely2023 Posted February 29 Share Posted February 29 Hi @tuanphan, we have a client who is using Squarespace 7.0, and we have a testimonial section auto-looping, but the timing is way too fast. How can we slow this down? Below is the link to the site, and the testimonial section is at the bottom of the page. Any help would be greatly appreciated. Thank you! https://www.meritsdesigngroup.com/story Link to comment
tuanphan Posted March 2 Share Posted March 2 On 2/29/2024 at 10:39 PM, Dovely2023 said: Hi @tuanphan, we have a client who is using Squarespace 7.0, and we have a testimonial section auto-looping, but the timing is way too fast. How can we slow this down? Below is the link to the site, and the testimonial section is at the bottom of the page. Any help would be greatly appreciated. Thank you! https://www.meritsdesigngroup.com/story Did you use code to add this auto loop or this is default feature? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Dovely2023 Posted March 4 Share Posted March 4 On 3/2/2024 at 3:11 AM, tuanphan said: Did you use code to add this auto loop or this is default feature? @tuanphan I added the code, but I'm unsure how to modify it to adjust for the timing. Link to comment
Dovely2023 Posted March 5 Share Posted March 5 23 hours ago, Dovely2023 said: @tuanphan I added the code, but I'm unsure how to modify it to adjust for the timing. Hi @tuanphan just following up on this. Link to comment
tuanphan Posted March 9 Share Posted March 9 On 3/2/2024 at 4:11 PM, tuanphan said: Did you use code to add this auto loop or this is default feature? Which code did you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Dovely2023 Posted March 12 Share Posted March 12 On 3/8/2024 at 9:06 PM, tuanphan said: Which code did you use? @tuanphan this is what I have now: /*Process Testimonials*/ @media screen and (min-width:800px) { #process-testimonials{ max-width:1000px!important; margin:auto; height:14vh!important; } } #process-testimonials{ .Index-gallery-item-content-heading { color:#3b3c3f!important; } p{ padding-left: 48px; padding-right: 48px; font-family: europa; font-weight: 300; font-style: normal; font-size: 15px; letter-spacing: .03em; line-height: 2em; text-transform: none; color: #3b3c3f; } .Index-gallery-control{ stroke:#222!important; top:20%; } .Index-gallery-item-content { vertical-align: top; } } .Index-gallery-item-content { padding-top: 0px!important; } #process-testimonials .Index-gallery-control{ stroke: #f58a3d !important; } .tweak-index-gallery-controls-large-arrows .Index-gallery-control { margin-top:-175px!important; } @media screen and (max-width:800px) { #process-testimonials{ max-width:1000px!important; margin:auto; height:35vh!important; } .tweak-index-gallery-controls-large-arrows .Index-gallery-control { margin-top:-75px!important; } } Link to comment
Dovely2023 Posted March 14 Share Posted March 14 On 3/12/2024 at 1:34 PM, Dovely2023 said: @tuanphan this is what I have now: /*Process Testimonials*/ @media screen and (min-width:800px) { #process-testimonials{ max-width:1000px!important; margin:auto; height:14vh!important; } } #process-testimonials{ .Index-gallery-item-content-heading { color:#3b3c3f!important; } p{ padding-left: 48px; padding-right: 48px; font-family: europa; font-weight: 300; font-style: normal; font-size: 15px; letter-spacing: .03em; line-height: 2em; text-transform: none; color: #3b3c3f; } .Index-gallery-control{ stroke:#222!important; top:20%; } .Index-gallery-item-content { vertical-align: top; } } .Index-gallery-item-content { padding-top: 0px!important; } #process-testimonials .Index-gallery-control{ stroke: #f58a3d !important; } .tweak-index-gallery-controls-large-arrows .Index-gallery-control { margin-top:-175px!important; } @media screen and (max-width:800px) { #process-testimonials{ max-width:1000px!important; margin:auto; height:35vh!important; } .tweak-index-gallery-controls-large-arrows .Index-gallery-control { margin-top:-75px!important; } } Hi @tuanphan just following up on this. Thank you! Link to comment
tuanphan Posted March 17 Share Posted March 17 On 3/15/2024 at 2:34 AM, Dovely2023 said: Hi @tuanphan just following up on this. Thank you! I think you used another code to make this loop, because I tried remove all code in Custom CSS box, but it still autoplay. Can you check it again? I think you choose this option and it should have this option to change speed Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment