Jump to content

Show Caption in Lightbox 71.

Recommended Posts

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

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
  • 1 month later...
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
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

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! 

 

unnamed-5.jpg

Link to comment
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! 

 

unnamed-5.jpg

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
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
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
  • 4 weeks later...
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;
}

image.png.50a172c825956a9137494a1589050c23.png

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
  • 4 weeks later...
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;
}

image.png.50a172c825956a9137494a1589050c23.png

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
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

image.png.647cf64e3d2b034cc0215ef520cac888.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.