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?