tuanphan Posted December 30, 2022 Share Posted December 30, 2022 11 hours ago, laku334 said: I'm using this code to add Lightbox captions to my images, and it seems to work OK, but on mobile view the caption is pushed nearly out of frame, and does not appear under the image in a similar matter as on desktop. I'm using the 7.1 version My website: https://dove-bumblebee-j2mp.squarespace.com pw:thomas Also, this code only works on gallery blocks, can it be applied to single image blocks? I'm very new to code, please be specific in your answer, thanks! #1. Add to Code Injection > Footer <style> @media screen and (max-width:767px) { .lightbox-caption { bottom: 0 !important; } } </style> #2. That code works for all Gallery Section. It won't work with Gallery Block or Image Blocks laku334 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
kiyary Posted February 13, 2023 Share Posted February 13, 2023 On 8/27/2022 at 10:38 AM, tuanphan said: Can you enable Gallery Caption & add some text? Currently It doesn't show anything Hello @tuanphan sorry for the late reponse. Yes! it is added here https://www.kiyary.com/editorial-illustration for example. I used to have it working with a code you provided. But one day it just stopped working so I had to replace everything into the fluid engine, but I still left some pages with the text underneath the images in gallery mode, hoping I will be able to make it hover on top of the image again. like projects but in masonry grid. thank you so much. 🙂 Link to comment
tuanphan Posted February 15, 2023 Share Posted February 15, 2023 On 2/13/2023 at 11:38 PM, kiyary said: Hello @tuanphan sorry for the late reponse. Yes! it is added here https://www.kiyary.com/editorial-illustration for example. I used to have it working with a code you provided. But one day it just stopped working so I had to replace everything into the fluid engine, but I still left some pages with the text underneath the images in gallery mode, hoping I will be able to make it hover on top of the image again. like projects but in masonry grid. thank you so much. 🙂 You mean show caption in lightbox, or show caption when hover image on grid? 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
NOByrne Posted February 20, 2023 Share Posted February 20, 2023 Hi, I was wondering if anyone could advise me how I can add a caption to an image in lightbox using squarespace 7.1. I have attached a screenshot for reference, I would like to add the title of the painting under the image. Do I need customised code for this function? I would really appreciate any help with this - thanks! Link to comment
tuanphan Posted February 20, 2023 Share Posted February 20, 2023 7 hours ago, NOByrne said: Hi, I was wondering if anyone could advise me how I can add a caption to an image in lightbox using squarespace 7.1. I have attached a screenshot for reference, I would like to add the title of the painting under the image. Do I need customised code for this function? I would really appreciate any help with this - thanks! Hi, Follow this thread https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two 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
kiyary Posted February 22, 2023 Share Posted February 22, 2023 On 2/15/2023 at 4:46 AM, tuanphan said: You mean show caption in lightbox, or show caption when hover image on grid? oh dear, I do mean, show caption when hoover! my bad. Is there a way to do it? It used to work, you gave me the code, it just stopped working one day 😞 Thank you! Link to comment
tuanphan Posted February 23, 2023 Share Posted February 23, 2023 22 hours ago, kiyary said: oh dear, I do mean, show caption when hoover! my bad. Is there a way to do it? It used to work, you gave me the code, it just stopped working one day 😞 Thank you! You mean Initial: Hide caption Hover: Show caption under image? https://www.kiyary.com/editorial-illustration 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
kiyary Posted March 20, 2023 Share Posted March 20, 2023 On 2/23/2023 at 2:24 PM, tuanphan said: You mean Initial: Hide caption Hover: Show caption under image? https://www.kiyary.com/editorial-illustration Hello Tuan Phan I mean, show the caption when Hoover, on the image, not under image, and some images will be a link to projects, so they don't need Lightbox. Hide the caption under image, just show it when hoover. Is this possible? Thank you! Link to comment
tuanphan Posted March 24, 2023 Share Posted March 24, 2023 On 3/20/2023 at 5:53 PM, kiyary said: Hello Tuan Phan I mean, show the caption when Hoover, on the image, not under image, and some images will be a link to projects, so they don't need Lightbox. Hide the caption under image, just show it when hoover. Is this possible? Thank you! Add to Design > Custom CSS /* Masonry hover */ figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-section .gallery-caption p { 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-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(255,255,255,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 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
kiyary Posted April 16, 2023 Share Posted April 16, 2023 On 3/24/2023 at 11:21 AM, tuanphan said: Add to Design > Custom CSS /* Masonry hover */ figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-section .gallery-caption p { 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-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(255,255,255,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } HII!! omg yes!!! This is what I needed for so long, thank you so much!! is there a way to change the font? this is already amazing. thank you!! Link to comment
tuanphan Posted April 18, 2023 Share Posted April 18, 2023 On 4/16/2023 at 8:25 PM, kiyary said: HII!! omg yes!!! This is what I needed for so long, thank you so much!! is there a way to change the font? this is already amazing. thank you!! This code control font kiyary 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