redtailcreative Posted January 16 Share Posted January 16 On 1/15/2024 at 4:09 AM, tuanphan said: What is your site url? It's https://cymbals-plum-9nnp.squarespace.com/ PW cuttingedge Link to comment
tuanphan Posted January 17 Share Posted January 17 9 hours ago, redtailcreative said: It's https://cymbals-plum-9nnp.squarespace.com/ PW cuttingedge Which page/section are you referring to? 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
redtailcreative Posted January 17 Share Posted January 17 11 hours ago, tuanphan said: Which page/section are you referring to? https://cymbals-plum-9nnp.squarespace.com/staff Link to comment
tuanphan Posted January 18 Share Posted January 18 12 hours ago, redtailcreative said: https://cymbals-plum-9nnp.squarespace.com/staff If you mean these captions, SS controls this, we can't adjust it 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
Seblaise Posted January 18 Share Posted January 18 I'm also trying to place the captions within Lightbox below the images rather than over. You can see the problem in the first 3 images on this page. https://www.sebhiggins.com/lakedistrict Please help, Thanks, Seb Link to comment
tuanphan Posted January 19 Share Posted January 19 20 hours ago, Seblaise said: I'm also trying to place the captions within Lightbox below the images rather than over. You can see the problem in the first 3 images on this page. https://www.sebhiggins.com/lakedistrict Please help, Thanks, Seb I see you figured it out with Beyon Space Lightbox 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
Seblaise Posted January 19 Share Posted January 19 Unfortunately not. The captions are still over the image instead of below. It's more obviously an issue on mobile view. Link to comment
Seblaise Posted January 22 Share Posted January 22 Hi, Can anyone help me with placing my captions under my images within Lightbox. As seen in the image, they are over my photograph. I'd like them not to interfere with the image. Both on desktop and mobile view. You can also see the problem in the first 3 images on this page. https://www.sebhiggins.com/lakedistrict Link to comment
tuanphan Posted January 23 Share Posted January 23 16 hours ago, Seblaise said: Hi, Can anyone help me with placing my captions under my images within Lightbox. As seen in the image, they are over my photograph. I'd like them not to interfere with the image. Both on desktop and mobile view. You can also see the problem in the first 3 images on this page. https://www.sebhiggins.com/lakedistrict You can use this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:767px) { [bs-lightbox-caption-position=overlay] .fancybox__slide.has-image .fancybox__caption { bottom: 0 !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
Seblaise Posted January 23 Share Posted January 23 Thank you. That's great for mobile view!.. Is it possible to do it for desktop too? Also. Sorry to be really fussy. But is it possible to put the caption just underneath the image rather than right at the bottom of the page? Link to comment
tuanphan Posted January 24 Share Posted January 24 Image height is different so I can't find a code to align them under image You try contacting Plugin Author, maybe he know a solution for this? 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
Seblaise Posted January 24 Share Posted January 24 Ok, thanks. Is there any code to do the same thing for desktop view? Link to comment
tuanphan Posted January 28 Share Posted January 28 Try changing the code to this [bs-lightbox-caption-position=overlay] .fancybox__slide.has-image .fancybox__caption { bottom: 0 !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
Seblaise Posted February 1 Share Posted February 1 Unfortunately that doesn't seem to make any difference. Is there any other code that might work? Thanks Link to comment
tuanphan Posted February 3 Share Posted February 3 I see it already in bottom 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
Seblaise Posted February 8 Share Posted February 8 If you look closely it is still over the actual photo rather than below it. Is there a code that places it below rather than on the image for desktop? Thanks and sorry for the back and forth, I appreciate the help! Link to comment
Seblaise Posted February 26 Share Posted February 26 Hi @tuanphan So I think the problem is that I need to reduce the size of the images within the Lightbox. As you can see in the screenshots, when I reduce the browser the caption goes below the image rather than on it. Would you know a code to reduce the images when opening them up in Lightbox? Thanks Beyondspace 1 Link to comment
tuanphan Posted February 27 Share Posted February 27 You should contact plugin author, he can help to solve these problem easier To reduce size, try using this to Custom CSS box .fancybox-image { max-width: 500px !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
Seblaise Posted February 27 Share Posted February 27 How do I find out who my plugin author is as I've forgotten? Link to comment
tuanphan Posted February 29 Share Posted February 29 On 2/27/2024 at 5:46 PM, Seblaise said: How do I find out who my plugin author is as I've forgotten? Where did you purchase lightbox plugin? You can check there, I think you can find their email 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
ELPage Posted March 18 Share Posted March 18 Hi All, I'm using this CSS code injection to header but I can't adjust font or positioning of the caption. It crosses over the image at the bottom on desktop and through the bottom 2/3rds on mobile. Any idea how to fix? <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: center; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: gray; background-color: rgba(0,0,0,0); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style> } Link to comment
tuanphan Posted March 19 Share Posted March 19 10 hours ago, ELPage said: Hi All, I'm using this CSS code injection to header but I can't adjust font or positioning of the caption. It crosses over the image at the bottom on desktop and through the bottom 2/3rds on mobile. Any idea how to fix? <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: center; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: gray; background-color: rgba(0,0,0,0); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style> } Can you share link to page in your site, we can check code 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
taradesigns Posted March 23 Share Posted March 23 I've been through 8 pages of this discussion and have had NO luck getting captions on Lightbox (while being hidden on the masonry grid). It's a an artist's portfolio and its a pretty simple ask. Not sure why it is not natively available on SQuarespace. Can anyone help please? Thanks in advance. Link to comment
tuanphan Posted March 24 Share Posted March 24 On 3/23/2024 at 2:04 PM, taradesigns said: I've been through 8 pages of this discussion and have had NO luck getting captions on Lightbox (while being hidden on the masonry grid). It's a an artist's portfolio and its a pretty simple ask. Not sure why it is not natively available on SQuarespace. Can anyone help please? Thanks in advance. You can follow code in this comment 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
lancewilson Posted March 30 Share Posted March 30 On 7/22/2023 at 1:40 AM, tuanphan said: Add to Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/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: p2; 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> Hello Tuan, this injection has worked great for me but there are a few issues. Firstly, is it possible to make it so the captions only appear in the lightbox? Right now they show up outside of the lightbox as well. Also is it possible to change the color and font to align with the rest of my website? Here is a page I am trying to accomplish this on: https://lancewilson.com/portfolio/mountains 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