Jump to content

Captions in Lightbox for galleries 7.1

Recommended Posts

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

 

Screenshot 2022-02-18 at 13.20.13.png

Screenshot 2022-02-18 at 13.24.04.png

Edited by Envela
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Screenshot 2022-02-18 at 13.20.13.png

Screenshot 2022-02-18 at 13.24.04.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...

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.

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.