Jump to content

Adding a background image to the lightbox function of a gallery slideshow

Recommended Posts

Site URL: https://burgundy-jaguar-fltk.squarespace.com/1-lost

Hello,

I created a photo gallery in the style of "Grid: Masonry" and turned on the "Lightbox" function so that visitors can scroll through all the images as pop-up images. My client wants a custom background image (in the style of a newspaper) to be placed behind all the images when they scroll through the gallery. I cannot find any codes to do this. I have provided a mockup of what my client wants. I would really appreciate some help finding a custom code to make this happen!

Thank you!

image.jpeg

Link to comment
8 hours ago, taknee said:

Sorry about that!

The password is: intheNYT

Url: https://burgundy-jaguar-fltk.squarespace.com/1-lost

 

Thank you!

Add to Design > Custom CSS

.gallery-lightbox {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/27/21/37/church-6898286__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: Center center;
}

 

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

Hello,

Thank you for that code, but I was also wondering about adding a background to each image when the image blows up and becomes bigger for people to scroll through (as depicted in the attached photo). Would it be possible to add the newspaper background behind the image when it becomes big instead of just having the white, opaque background?

Thank you again!

Screen Shot 2022-07-08 at 9.11.27 AM.png

Link to comment

Try this new code

.gallery-lightbox {
    background-image: url(https://static1.squarespace.com/static/61cd11ce493b4d11a8c870f7/t/629022fc921d4401bd0d7ad6/1653613309043/Newspaper_Background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: Center center;
}
.gallery-lightbox-background {
    opacity: 0;
}

 

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
On 7/15/2022 at 10:21 PM, taknee said:

Hello @tuanphan, I was wondering if there's a new code for this? They updated Squarespace and the code won't apply to new slideshows.

Thank you again!

I see the code still works on my end. Try clearing your browser cache.

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.