tuanphan Posted April 7, 2020 Share Posted April 7, 2020 5 hours ago, Alfredo24 said: Hi I?ve tried to add the CSS code but nothing happens and I cannot add the JS code since I only have the basic subscription so I don't have access to the tool code injection. Any help? You need to insert both CSS & JS. 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
Moonside Posted April 7, 2020 Share Posted April 7, 2020 Can anyone help with code to add padding or whitespace between the images in a slideshow reel? Link to comment
kinapark Posted April 8, 2020 Share Posted April 8, 2020 Hi @brandon First of all, thank you so much for helping many people solving the caption problem. I'm a very beginner to Squarespace, and was able to add proper credits to the light box thanks to your code. But I had encounter the same problem as @IvanOB Quote One problem, I can't correct is that when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image. The only way i have managed to fix is by making a black box around the caption as shown below. Would you please help me to solve this problem? https://www.kinapark.com/children-stories/winter-forest Thank you so much! Link to comment
brandon Posted April 8, 2020 Share Posted April 8, 2020 Thanks for the message @kinapark. I'm aware of the issue. I just have to find the time to fix it and, as you know, it's a bit rough out there at the moment. I do hope to tackle this soon. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
kinapark Posted April 8, 2020 Share Posted April 8, 2020 Thank you! @brandon No rush. Any help in the future I will deeply appreciate. I live near NYC. It is very sad out here. Hope you are safe and healthy! Link to comment
j03ie Posted April 13, 2020 Share Posted April 13, 2020 Hi Brandon, Guys, I have tried pasting the captions-work-around code into the CSS editor and nothing happened. wish i had known squarespace dont provide image captions before i signed up! I am really bad at coding and really appreciate you helping out with this. Ideally i would rather have them display underneath the images and not in an overlay as shown in your demo. I saw your fix for this and tried that out. and again nothing. any advice? 🙏 Link to comment
brandon Posted April 14, 2020 Share Posted April 14, 2020 Hi @j03ie. It is necessary to add both the CSS and the JavaScript. Take another look at the instructions and be sure you follow them fully, both parts. If you get it up and running, changing how the captions display is a matter of editing the CSS to your liking. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
j03ie Posted April 15, 2020 Share Posted April 15, 2020 Hi Brandon, I have now added both parts and still nothing. Maybe you could take a look if you have time, https://algae-porcupine-fpt2.squarespace.com/config/settings/advanced Do you know when square space are going to provide captions?! best J Link to comment
ed.design Posted April 16, 2020 Share Posted April 16, 2020 Hi Brandon, Thank you for this great solution to the lack of Lightbox captions in 7.1 - I have successfully added captions to my slideshow. I was wondering if you know a way to have the caption break into 2 lines. My slideshow is an artist portfolio so the captions have the image title which I'd like to display on the first line and then size, year etc. which I'd like to display on a second line of text. Any thoughts? Also, I am having the same caption overlap problem as some others in this forum: One problem, I can't correct is that when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image. The only way i have managed to fix is by making a black box around the caption as shown below. Thanks so much for your help! Erin Link to comment
David_S Posted April 21, 2020 Share Posted April 21, 2020 Just wanted to say a big THANK YOU for this workaround. It's super annoying this isn't supported natively yet, but also super appreciated to have solutions like this posted, which when I try them, just work! You've made me very happy, thank you! 🙇♂️ Link to comment
JohnS123 Posted April 22, 2020 Share Posted April 22, 2020 Brandon, thanks SO much for this thread. You're my hero. Please add me to the list of folks looking for a lightbox caption lag workaround. Thank you! Link to comment
JRBrick Posted April 23, 2020 Share Posted April 23, 2020 Thanks so much Brandon. The CSS didn't work for me but the Java Script worked perfectly! 🙂 Link to comment
Guest Posted April 25, 2020 Share Posted April 25, 2020 Thank you so much @brandon, this is a LIFESAVER. Link to comment
brandon Posted April 27, 2020 Share Posted April 27, 2020 Glad to hear it @JanBrick and @luxpacifica. Don't forget to like the original post if you didn't already. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
brandon Posted April 27, 2020 Share Posted April 27, 2020 This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are: transition: opacity 0.1s ease-out; .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123 ed.design, 7TK, paul2009 and 2 others 3 2 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
beren Posted April 28, 2020 Share Posted April 28, 2020 On 10/26/2019 at 9:18 AM, brandon said: This is of course experimental. Do let me know how it works for you, or if you have questions. @brandon Thank you so much. This is brilliant. brandon 1 Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 (edited) HI @brandon Thank you very much ! It is very helpful. Every is perfect except two things for me: - Do you know how to center the text on the images ? ( with a gallery strip ) - The links through my images are not working since your tutorial... Do you know why ? Thanks again, Charles https://bumblebee-drum-w3fz.squarespace.com/interiordesign Edited April 28, 2020 by Charlest93 Link to comment
brandon Posted April 28, 2020 Share Posted April 28, 2020 Hi @Charlest93. Here's what I think you're looking for: .gallery-item-description { text-align: center; pointer-events: none; } If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 (edited) Amazing, thank you @brandon 🙏 Edited April 28, 2020 by Charlest93 Link to comment
brandon Posted April 28, 2020 Share Posted April 28, 2020 @Charlest93 : I see you figured it out. Also, if a post helps you out, don't forget to post a like/thanks on it. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
gabmartinez7 Posted April 30, 2020 Share Posted April 30, 2020 Hi @brandon, I can't seem to get this right, even though your demo shows its do-able. I have copy and pasted both codes and put them on my website. No descriptions are coming up, but I am getting the text of what I saved the photos as, see example attached. Is it just as simple as copy and pasting the two codes? Or do I need to edit the code to match my website? I only have one gallery in use (which is a simple slideshow), so I thought it would automatically apply to it. Any help appreciated, thanks. Link to comment
Guest Posted April 30, 2020 Share Posted April 30, 2020 hi @brandon, Do you know if it is possible to get the same codes but for Tablet and Mobile ? I tried with @media only screen and (max-width: 640px) below but it messes up the desktop view as well. Thank you ! Link to comment
brandon Posted April 30, 2020 Share Posted April 30, 2020 @gabmartinez7: If you're seeing a filename, that is likely because you have not entered description text. See the third bullet point under "JavaScript" in the original answer. However, if that's not the cause, then could you provide a link to the page in question? @Charlest93: I'm not sure what you mean by "get the same codes". Having said that, I did take another look at the CSS for the "Slideshow" gallery type where thumbnails are displayed, and I realized that things weren't displaying quite right on mobile. So I made a small adjustment. You could try using the updated CSS in my original post. If that doesn't work, can you provide a link to the page in question? tuanphan 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Guest Posted April 30, 2020 Share Posted April 30, 2020 thank you for your answer @brandon. I am french, sorry for my english ! https://bumblebee-drum-w3fz.squarespace.com/interiordesign This is my website. For the desktop view everything is perfect. But the mobile view is bad. (look at the text hover). I just would like to work separately: Desktop and Mobile. For example: font size 2rem in the desktop and 1rem in the mobile view ! Thank you ! Link to comment
brandon Posted April 30, 2020 Share Posted April 30, 2020 Ah, sorry about @Charlest93. I forgot you had already sent a link earlier in this post. Also, your English is much better than my French! What you want can be accomplished with CSS alone. However, it does require an understanding of it, and being comfortable using your browser's web inspector to identify elements and get them looking like you want. I've written some additional CSS you can add that should help you get a start on it. However, while you can certainly add the following CSS after what you already have, it'd be better to review it and edit your existing CSS to minimize overlap. @media screen and (max-width: 767px) { .gallery-grid-item { padding-bottom: 0; margin-bottom: 30px; } .gallery-item-description { padding: 0 !important; top: 50%; transform: translateY(-50%); bottom: inherit !important; font-size: 1em; } } Let me know how that works for you. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) 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