Captions in Lightbox for galleries 7.1

Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7.0, I don't know why they wouldn't keep that but eh). 

So it works great, but I wonder if there's a way to make it look like a 7.0 lightbox caption so that:
- it matches the length of the image, wether it's portrait or landscape mode.
- the opacity is reduced and the block is overing the image.

Basically, the first screenshot is what I have now on my 7.1 website, and the second is what I would like to have back 🙂

Thanks a lot!

This is the code I have:

.image-caption-wrapper {
  background: none !important; /* Background Overlay*/
  margin-left:25px;
}

/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * CSS
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
font-family: Lato;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    font-size: 15px;
    margin: 0 0 1em;
    color: #EBEBEB;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 0.5em;
  padding: 1em 2em;
  max-width:55%;
  text-align:center;
  background-color: #121212;
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

2 hours ago, Envela said:

Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7.0, I don't know why they wouldn't keep that but eh). 

So it works great, but I wonder if there's a way to make it look like a 7.0 lightbox caption so that:
- it matches the length of the image, wether it's portrait or landscape mode.
- the opacity is reduced and the block is overing the image.

Basically, the first screenshot is what I have now on my 7.1 website, and the second is what I would like to have back 🙂

Thanks a lot!

This is the code I have:

.image-caption-wrapper {
  background: none !important; /* Background Overlay*/
  margin-left:25px;
}

/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * CSS
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
font-family: Lato;
    font-weight: 200;
    font-style: normal;
    line-height: 1.8em;
    font-size: 15px;
    margin: 0 0 1em;
    color: #EBEBEB;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 0.5em;
  padding: 1em 2em;
  max-width:55%;
  text-align:center;
  background-color: #121212;
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

 

Can you share your site with the protected password so we can take a look?

@bangank36 - I'm wondering about this too for my site. Would you be willing to look at my site too?

6 hours ago, AIHMN said:

@bangank36 - I'm wondering about this too for my site. Would you be willing to look at my site too?

Can you share link to page where you use gallery? We can check easier

Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up!  Any idea why this might be? I've very frustrated.

On 8/6/2022 at 3:00 AM, Nina42 said:

Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up!  Any idea why this might be? I've very frustrated.

Hi. Can you share link to gallery page? We can check easier

@tuanphan Hi. I also would like to have image captions in light box on a gallery page. I currently have different custom code to have a similar functionality, but it doesn't match the length of the image.. If you could give me some advise I'd appreciate it. Thank you.

Here's my gallery page:
https://www.sushiofgari.com/signature

On 1/12/2023 at 3:25 AM, 3-day-monk said:

@tuanphan Hi. I also would like to have image captions in light box on a gallery page. I currently have different custom code to have a similar functionality, but it doesn't match the length of the image.. If you could give me some advise I'd appreciate it. Thank you.

Here's my gallery page:
https://www.sushiofgari.com/signature

NO way to equal caption width = image width

You can consider reduce caption width. or make caption span fullwidth of screen.

If you want this, we can give the code

@tuanphan Hi Tuan, I'm having a similar issue. I have a masonry gallery set up on my site and I would like the captions to appear on a hover and also have the captions appear under the image in lightbox. I've figured out how to get the captions in hover, but can not find a way to have the captions appear in the lightbox. Can you help with this? 

My site URL is www.artdontsleep.com

Here is the code I have currently in my CSS for the hover functionality: 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
padding: 1vw;
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 100;
}
.gallery-caption-grid-masonry {
transition-delay: 0ms;
}

.gallery-masonry-lightbox-link:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}
 

On 2/15/2023 at 8:10 AM, jazzzz said:

@tuanphan Hi Tuan, I'm having a similar issue. I have a masonry gallery set up on my site and I would like the captions to appear on a hover and also have the captions appear under the image in lightbox. I've figured out how to get the captions in hover, but can not find a way to have the captions appear in the lightbox. Can you help with this? 

My site URL is www.artdontsleep.com

Here is the code I have currently in my CSS for the hover functionality: 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
padding: 1vw;
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 100;
}
.gallery-caption-grid-masonry {
transition-delay: 0ms;
}

.gallery-masonry-lightbox-link:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}
 

Use this code

On 1/12/2023 at 3:25 AM, 3-day-monk said:

@tuanphan Hi. I also would like to have image captions in light box on a gallery page. I currently have different custom code to have a similar functionality, but it doesn't match the length of the image.. If you could give me some advise I'd appreciate it. Thank you.

Here's my gallery page:
https://www.sushiofgari.com/signature

Just like to chime in and provide an alternate, complete solution with my new Lightbox Studio (beta) plugin. The gallery caption has been curated to resize based on image actual width

Check your site in action here (feedbacks are very welcome)

@jazzzz I tested your site against the new gallery, I wonder why you have a large padding top?

On 8/5/2022 at 4:00 PM, Nina42 said:

Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up!  Any idea why this might be? I've very frustrated.

Same here. I've added the exact code with no changes to my site. What might I be doing wrong?

On 6/14/2023 at 12:13 PM, lauren00 said:

Same here. I've added the exact code with no changes to my site. What might I be doing wrong?

What is your site url?

On 6/16/2023 at 5:30 AM, tuanphan said:

What is your site url?

Does my site need to be set to public in order for you to take a look?

On 6/21/2023 at 3:53 AM, lauren00 said:

Does my site need to be set to public in order for you to take a look?

No need. You can setup an access password then share url.

On 6/21/2023 at 3:53 AM, lauren00 said:

Does my site need to be set to public in order for you to take a look?

You can only set the password protected for the single page and share it with us

Hello,

I would also like to have captions in the Lightbox. Not in the gallery.

The before mentioned code doesn't seem to work on my website.

My website is https://www.abeling.nl

(I have for now turned caption in the gallery off, because I don't want captions there. But when turned on they only appear in the gallery, not in the Lightbox)

Could you have a look please?

Thanks and best regards,

Johannes

On 12/18/2023 at 8:45 PM, Jabeling said:

Hello,

I would also like to have captions in the Lightbox. Not in the gallery.

The before mentioned code doesn't seem to work on my website.

My website is https://www.abeling.nl

(I have for now turned caption in the gallery off, because I don't want captions there. But when turned on they only appear in the gallery, not in the Lightbox)

Could you have a look please?

Thanks and best regards,

Johannes

Try this code instead

Hi! Joining this chat as I'm also trying to get captions only to show in the Lightbox. Not in the gallery. I am using both gallery grid-masonry and grid-strips. I've tried lots of variations of the code shared above, but have not had success. And I also want to make sure this feature carries over to mobile view.

Any advice would be great 

The website is still under construction and password protected. Here is a URL to a page that I am looking to edit to only show the image captions in the lightbox: https://vicki-walsh.squarespace.com/black-sheep-drawings
Password: TESTSITE24VW

Do you mean showing the image caption when Lightbox opened like this?

Besides, what is the plan that your Squarespace site is currently subscribed to?

@Beyondspace yes exactly! My client wold like the image captions to only appear when the images are clicked on. Right now the site is unpublished, but it will likely be subscribed under the basic plan, or business plan at most. 

@Alexi47 You try this thread