Beyondspace Posted May 20 Share Posted May 20 On 5/10/2024 at 2:37 AM, lisah123123 said: Hi! I have managed to follow the instructions so that the caption is only visible when I hover over the image. However, it is not possible to click on the image so it appears as a lightbox? Could that be solved? I only have Personal plan and i'm trying to avoid business plan. Thank you so much for all the help so far!! Could you share your site URL and show us the image where you put the links on the image? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
SamLeon Posted May 25 Share Posted May 25 Thanks a lot for all the very helpful comments! Would it possible to make the Caption in the Lightbox (only) Like the below? on Desktop and Mobile? URL to gallery: https://samuel-leon.com/sekem-1 Thanks a lot in advance, Samuel Link to comment
tuanphan Posted May 26 Share Posted May 26 11 hours ago, SamLeon said: Thanks a lot for all the very helpful comments! Would it possible to make the Caption in the Lightbox (only) Like the below? on Desktop and Mobile? URL to gallery: https://samuel-leon.com/sekem-1 Thanks a lot in advance, Samuel You mean make text has a white background? 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
tuanphan Posted May 27 Share Posted May 27 18 hours ago, SamLeon said: Yes and alignment to the right... 🙂 Can't make white box equal width with image, it will something like this div.tlightbox-caption { width: 100%; text-align: right; background-color: white; } Beyondspace 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
Beyondspace Posted June 9 Share Posted June 9 On 5/27/2024 at 9:00 AM, tuanphan said: Can't make white box equal width with image, it will something like this div.tlightbox-caption { width: 100%; text-align: right; background-color: white; } @tuanphan Is it a typo? div.tlightbox-caption { BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
VladaKremenovic Posted June 19 Share Posted June 19 On 6/21/2020 at 5:54 AM, tuanphan said: Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .3em text-align: left; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style> Code from another member on Forum. Could you help me figure out why this doesn't work for me @tuanphan or someone else? I'm trying to use a grid gallery to show artist bios on an event page. https://www.ontheboards.org/events/24-25/javaad-alipoor I was hoping that when the lightbox opens, it shows the photo on left side, followed by the caption on the right, as black text on a solid white background. Also it should switch to vertical stack on mobile. Link to comment
tuanphan Posted June 19 Share Posted June 19 6 hours ago, VladaKremenovic said: Could you help me figure out why this doesn't work for me @tuanphan or someone else? I'm trying to use a grid gallery to show artist bios on an event page. https://www.ontheboards.org/events/24-25/javaad-alipoor I was hoping that when the lightbox opens, it shows the photo on left side, followed by the caption on the right, as black text on a solid white background. Also it should switch to vertical stack on mobile. You mean customize current lightbox to your request? 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
VladaKremenovic Posted June 21 Share Posted June 21 On 6/19/2024 at 1:07 AM, tuanphan said: You mean customize current lightbox to your request? Yes, exactly. Link to comment
tuanphan Posted June 21 Share Posted June 21 7 hours ago, VladaKremenovic said: Yes, exactly. You can use this to Website Tools (under Not Linked) > Custom CSS @media screen and (min-width:768px) { .yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder img { width: 50% !important; position: absolute !important; height: auto !important; } .yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder .sqs-lightbox-meta { position: absolute !important; top:10px; left: calc(~"50% + 50px") !important; } } 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
AdamBlyth Posted June 23 Share Posted June 23 On 6/21/2020 at 10:54 PM, tuanphan said: Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .3em text-align: left; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style> Code from another member on Forum. Thanks for this but it doesn't appear to work on my site, any assistance greatly appreciated. https://sepia-koala-36ck.squarespace.com/gallery Link to comment
tuanphan Posted June 23 Share Posted June 23 5 hours ago, AdamBlyth said: Thanks for this but it doesn't appear to work on my site, any assistance greatly appreciated. https://sepia-koala-36ck.squarespace.com/gallery It is old code, use this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">' + text.innerHTML + '</p>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; } .light-caption { visibility: hidden; position: fixed; font-family: source code pro; color:grey; font-size: 14px; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .gallery-lightbox-controls { display: flex !important; } </style> AdamBlyth 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
AdamBlyth Posted June 23 Share Posted June 23 2 hours ago, tuanphan said: It is old code, use this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">' + text.innerHTML + '</p>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; } .light-caption { visibility: hidden; position: fixed; font-family: source code pro; color:grey; font-size: 14px; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .gallery-lightbox-controls { display: flex !important; } </style> Thank you - that worked for adding the Lightbox descriptions. A slight issue is sometimes when I first click on an image and the lightbox opens, there is no caption unless I click away from the image, like I have to activate the caption on click and then it appears on all images as I use the Lightbox controls as I click through each image. https://sepia-koala-36ck.squarespace.com/gallery Link to comment
tuanphan Posted June 24 Share Posted June 24 18 hours ago, AdamBlyth said: Thank you - that worked for adding the Lightbox descriptions. A slight issue is sometimes when I first click on an image and the lightbox opens, there is no caption unless I click away from the image, like I have to activate the caption on click and then it appears on all images as I use the Lightbox controls as I click through each image. https://sepia-koala-36ck.squarespace.com/gallery Try this code under <style> p.light-caption { visibility: visible !important; } </style> AdamBlyth 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
PLoughran Posted July 3 Share Posted July 3 Hi everyone, I am trying to have descriptions appearing only underneath the images lightbox and NOT on the thumbnail grid but somehow none of the CSS codes I found on the forum do anything. Do you know what it might be due to ? Thank you for your help !!! Link to comment
Amocha Posted July 4 Share Posted July 4 On 6/23/2024 at 10:03 AM, tuanphan said: It is old code, use this new code I created an account just to thank you for this @tuanphan. It worked perfectly for me. Thanks a lot ! tuanphan 1 Link to comment
HoaLT Posted July 14 Share Posted July 14 On 7/3/2024 at 8:46 PM, PLoughran said: Hi everyone, I am trying to have descriptions appearing only underneath the images lightbox and NOT on the thumbnail grid but somehow none of the CSS codes I found on the forum do anything. Do you know what it might be due to ? Thank you for your help !!! What is your URL? Share it here so we can take a look Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
KAF13 Posted July 15 Share Posted July 15 Hi there! First of all, thank you for the code that helps captions/descriptions only appear in lightbox. Soooo helpful. I've come across some sort of glitch where the captions don't adjust/display when I scroll through images in lightbox mode. They only come up correctly when I escape and click on the correct picture. I used the new code from tuanphan from 6/23/24 and even added the important visibility style addition that solved someone else's similar (though not exact) problem. Any ideas? Here's my website: https://www.bobowickcollection.com/collection1 Link to comment
tuanphan Posted July 16 Share Posted July 16 19 hours ago, KAF13 said: Hi there! First of all, thank you for the code that helps captions/descriptions only appear in lightbox. Soooo helpful. I've come across some sort of glitch where the captions don't adjust/display when I scroll through images in lightbox mode. They only come up correctly when I escape and click on the correct picture. I used the new code from tuanphan from 6/23/24 and even added the important visibility style addition that solved someone else's similar (though not exact) problem. Any ideas? Here's my website: https://www.bobowickcollection.com/collection1 I tried click Arrows in Lightbox and captions show fine 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
KAF13 Posted July 17 Share Posted July 17 Hm. It still doesn't work on desktop for me when I scroll, but it does work on mobile. Any thoughts? I kinda doubt it's my computer Link to comment
Beyondspace Posted July 18 Share Posted July 18 3 hours ago, KAF13 said: Hm. It still doesn't work on desktop for me when I scroll, but it does work on mobile. Any thoughts? I kinda doubt it's my computer This is me trying to scroll through images on desktop browser, looks like the caption can change correctly Kapture 2024-07-18 at 09.42.01.mp4 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
KAF13 Posted July 22 Share Posted July 22 Hm interesting. Well fingers crossed it's only happening for me! Thanks for looking all Beyondspace 1 Link to comment
GabrielD Posted July 29 Share Posted July 29 Hi, I've used the code from @tuanphan , and it works perfectly on desktop. However, on mobile, the arrows are on top of the images and don't align very well. What I want to do instead is hide the arrows and use a swipe to switch between images on mobile. I tried to ask ChatGPT for help, but it can't figure it out without messing up the captions. Does anyone here know a solution to this problem? Thanks! Link to comment
HoaLT Posted July 29 Share Posted July 29 4 hours ago, GabrielD said: Hi, I've used the code from @tuanphan , and it works perfectly on desktop. However, on mobile, the arrows are on top of the images and don't align very well. What I want to do instead is hide the arrows and use a swipe to switch between images on mobile. I tried to ask ChatGPT for help, but it can't figure it out without messing up the captions. Does anyone here know a solution to this problem? Thanks! Can you share your URL here so we can check it more easily? Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 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