Yva Posted December 23, 2020 Share Posted December 23, 2020 Site URL: https://sheep-sparrow-jj63.squarespace.com/ Hi everyone, Looking for a solution to showing the captions of the images only when they are in a lightbox - I want the caption to show beneath the image. I've tried a number of similar solutions asked by others previously but to no avail. https://sheep-sparrow-jj63.squarespace.com/ Password - annabubba Many thanks, Yva Link to comment
Yva Posted December 23, 2020 Author Share Posted December 23, 2020 i've now got it to work using a code i found on another query but that is only when the images are in a 'simple' grid - I'd like it to work for a masonry grid. Many thanks in advance, Yva https://forum.squarespace.com/topic/164356-lightbox-captions-only/page/2/ <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> Link to comment
tuanphan Posted January 2, 2021 Share Posted January 2, 2021 Hi. I think I posted above code. Have you solved this with masonry yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Seblaise Posted January 7, 2022 Share Posted January 7, 2022 Hi tuanphan, I'm having the same problem. It only works for Simple Gallery, not Masonry. Any ideas? Thanks Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 12 hours ago, Seblaise said: Hi tuanphan, I'm having the same problem. It only works for Simple Gallery, not Masonry. Any ideas? Thanks Can you share link to page where you use Masonry? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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