tuanphan Posted December 13, 2020 Share Posted December 13, 2020 1 minute ago, pixolnaut said: Has there been an answer on how to add line breaks to the caption in lightbox? I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon. Currently the lightbox display looks like this: I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery: Thank you in advance! try add br tag Quote Clouds Over Ai Petri <br/>Oil on Board<br/> 2017 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
pixolnaut Posted December 13, 2020 Share Posted December 13, 2020 (edited) @tuanphan I've tried the <br> tag but that only adds the line break in the default caption and not in the lightbox caption. Any other ideas? edit: I've found a janky workaround by using a 3 per em whitespace unicode to organise the text in the caption abit better. It's a little weird but it's the only thing that I've found to affect formatting in the caption. https://qwerty.dev/whitespace/ Unfortunately line break unicodes I've found do not work. Where I am at, at the moment: It looks decent in mobile view but you have to fiddle around with the exact number of blank unicodes to insert. Not ideal but it does the job for now. Edited December 14, 2020 by pixolnaut Placeholder solution Link to comment
ShaneV Posted December 14, 2020 Share Posted December 14, 2020 <script> document.addEventListener("DOMContentLoaded", function() { function render(checked, index) { (function(p, show) { var map; var values; var messageValue; var messages; var name; var type; var k; map = document.querySelectorAll(p ? p : 'section.gallery-section,\x20.gallery-lightbox'); name = map.length; for (; name--;) { values = map[name].querySelectorAll(show ? show : '[class*=\x27-item\x27]:not([class*=\x27item-\x27])'); type = values.length; for (; type--;) { messageValue = values[type].getElementsByTagName('img')[0]['alt']['trim'](); if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false) { messages = document.createElement('div'); messages.className = 'gallery-item-description'; messages.textContent = messageValue; values[type].appendChild(messages); } } } })(checked, index); } render(); }); </script> Here is an deobfuscated version of the original script. It works the same but is much more human readable. It also does not include image file names if they end in "png" or "jpg." 7TK, Mieke and tuanphan 3 Link to comment
Mieke Posted December 17, 2020 Share Posted December 17, 2020 (edited) On 12/14/2020 at 9:40 AM, ShaneV said: Thank you @ShaneV, works great! I needed and added a .gif exclusion in the script ;^) if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false && messageValue.includes("gif") == false) Edited December 17, 2020 by Mieke Link to comment
AlphonseTheMagnificent Posted January 5, 2021 Share Posted January 5, 2021 On 10/25/2019 at 11:18 PM, brandon said: Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use. --------------------------------------------------------------------- Hi @dan3. Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 . View Demo Site Hi Brandon - 5/1/2020 - the link to the demo site you've supplied says it has 'expired' - is there any way to resuscitate it? - Thanks, Mark Link to comment
Beyondspace Posted January 6, 2021 Share Posted January 6, 2021 On 12/13/2020 at 5:19 PM, pixolnaut said: Has there been an answer on how to add line breaks to the caption in lightbox? I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon. Currently the lightbox display looks like this: I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery: Thank you in advance! Could you share your url? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Misanthropology Posted January 15, 2021 Share Posted January 15, 2021 Is possible to add captions to the lightboxes in a gallery using CSS? Beyondspace 1 Link to comment
Beyondspace Posted January 15, 2021 Share Posted January 15, 2021 1 hour ago, Misanthropology said: Is possible to add captions to the lightboxes in a gallery using CSS? It should require Custom js, with business plan or higher BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
clarkgallery Posted March 4, 2021 Share Posted March 4, 2021 Hi, thanks to @brandon, @tuanphan, and everyone who has contributed to this thread so far! I got Brandon's code to work on main pages, but not for blog pages. Can anyone tell me what class selectors to pass into the function so it applies to gallery slideshows on blog pages? example page: https://www.clarkgallery.com/artists/olga-antonova Link to comment
tuanphan Posted March 11, 2021 Share Posted March 11, 2021 On 3/4/2021 at 9:07 PM, clarkgallery said: Hi, thanks to @brandon, @tuanphan, and everyone who has contributed to this thread so far! I got Brandon's code to work on main pages, but not for blog pages. Can anyone tell me what class selectors to pass into the function so it applies to gallery slideshows on blog pages? example page: https://www.clarkgallery.com/artists/olga-antonova It looks like you solved with squarewebsite.org plugin? 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
JJDW Posted April 5, 2021 Share Posted April 5, 2021 Hi all, I've got most of it working the way I want it to, thanks for this code @brandon @tuanphan There's one final thing I need to solve, as do more people from what I've read in this thread. I wish I could add line breaks in the captions that show up in the Lightbox. I've tried adding the <br> or <br/> codes in the description of the image but none of it seems to work. Could you please provide the bit of code that makes this possible? my website is: https://www.jjdw.nl/galleries/small-worlds And it's the first image in this gallery that I've tried doing this with. Link to comment
HarryMeakin Posted May 14, 2021 Share Posted May 14, 2021 (edited) @brandon @tuanphan I'm having massive issues with this on mobile. When the caption is longer it reduces the size of the image instead of increasing the content area. Any thoughts? https://bridgendathletics.org/about password: bridgendathletics Edited May 14, 2021 by HarryMeakin Link to comment
spekerdude Posted May 18, 2021 Share Posted May 18, 2021 @brandon Code has been working for me until a couple months ago now its showing the descriptions twice under the photo, anyone know how to fix? Link to comment
tuanphan Posted May 19, 2021 Share Posted May 19, 2021 9 hours ago, spekerdude said: @brandon Code has been working for me until a couple months ago now its showing the descriptions twice under the photo, anyone know how to fix? Can you share site url? We can check easier 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
spekerdude Posted May 19, 2021 Share Posted May 19, 2021 7 hours ago, tuanphan said: Can you share site url? We can check easier https://www.precisioncam.ca/ Link to comment
tuanphan Posted May 20, 2021 Share Posted May 20, 2021 22 hours ago, spekerdude said: https://www.precisioncam.ca/ Add to Design > Custom CSS /* hide 1 lightbox caption */ body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description { display: none; } 7TK 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
khnyc Posted May 23, 2021 Share Posted May 23, 2021 Hello Brandon, Thank you very much for lightbox captions workarounds. I am now able to add them under images in a Masonry Gallery and the latter's lightbox. However, the caption lines appear 2x under each lightbox image. (They also repeats 2x under the Gallery images if I do not turn captions off in Gallery edit. They revert to 1x in Gallery only when I do.) Adding/ removing the supplied CSS code does not seem to resolve the problem. The duplication seems to lie within Java. Is there a specific line there which I can remove so that the Lightbox caption only runs 1x? Many thanks. Link to comment
tuanphan Posted May 24, 2021 Share Posted May 24, 2021 10 hours ago, khnyc said: Hello Brandon, Thank you very much for lightbox captions workarounds. I am now able to add them under images in a Masonry Gallery and the latter's lightbox. However, the caption lines appear 2x under each lightbox image. (They also repeats 2x under the Gallery images if I do not turn captions off in Gallery edit. They revert to 1x in Gallery only when I do.) Adding/ removing the supplied CSS code does not seem to resolve the problem. The duplication seems to lie within Java. Is there a specific line there which I can remove so that the Lightbox caption only runs 1x? Many thanks. Add to Design > Custom CSS /* hide 1 lightbox caption */ body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description { display: none; } 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
spekerdude Posted May 25, 2021 Share Posted May 25, 2021 On 5/20/2021 at 7:11 AM, tuanphan said: Add to Design > Custom CSS /* hide 1 lightbox caption */ body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description { display: none; } many thanks! Link to comment
visualite Posted June 2, 2021 Share Posted June 2, 2021 Hi, when i insert the code the imagedesciption is displayed twice. How do i fix that? did anyone else have this problem? Link to comment
tuanphan Posted June 6, 2021 Share Posted June 6, 2021 On 6/2/2021 at 8:55 PM, visualite said: Hi, when i insert the code the imagedesciption is displayed twice. How do i fix that? did anyone else have this problem? Use this CSS /* hide 1 lightbox caption */ body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description { display: none; } 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
Guest Posted June 6, 2021 Share Posted June 6, 2021 The 7.1 gallery grid masonry, captions are now being shown under the images without the colour border using your code. Link to comment
loooop Posted June 11, 2021 Share Posted June 11, 2021 Hi there, I've tried a different options of code to show the caption on hover on a gallery and none of them works 😞 Here is the page where the caption doesnt show up : https://loooop.studio/home Here is the code I've put on the Custom CSS : figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } Thanks in advance for the help ! Link to comment
tuanphan Posted June 12, 2021 Share Posted June 12, 2021 11 hours ago, loooop said: Hi there, I've tried a different options of code to show the caption on hover on a gallery and none of them works 😞 Here is the page where the caption doesnt show up : https://loooop.studio/home Here is the code I've put on the Custom CSS : figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } Thanks in advance for the help ! rename grid to masonry loooop 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment