Hombre_de_Castillo Posted January 5 Share Posted January 5 (edited) Still having two issues with the lightbox. Any help would be greatly appreciated. 1) In the lightbox, the arrow keys (on desktop) only trigger the image to advance. When advancing images using the arrow key, the caption for the previous image remains visible for about one second, then the captions disappear entirely. 2) When the lightbox is closed then reopened, it opens with the caption for the last viewed image visible, which disappears after about a second. If using clicks to advance the images the correct caption shows up for the next image, but if using arrows to advance the images no caption appears (as mentioned above). My site is https://www.jeff-castleman.com Not sure if this is a java or CSS issue, and my knowledge of both is basically non-existent, so I'm at a loss. Thanks in advance for any time anyone spends to figure this out! --Jeff Edited January 5 by Hombre_de_Castillo tuanphan 1 Link to comment
redtailcreative Posted January 15 Share Posted January 15 Hi @tuanphan Thank you for this code! All is working well on my site except I'm trying to use this as a way to feature bios for my client's salon and there seems to be a character limit. Is there any way to increase this? It's cutting off my image description after a few lines. Link to comment
tuanphan Posted January 15 Share Posted January 15 7 hours ago, redtailcreative said: Hi @tuanphan Thank you for this code! All is working well on my site except I'm trying to use this as a way to feature bios for my client's salon and there seems to be a character limit. Is there any way to increase this? It's cutting off my image description after a few lines. What is your site url? 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment