Jump to content

Close gallery light box by clicking out side image.

Recommended Posts

Site URL: http://www.timjobling.co.uk

Hi,

I've done a search of the forum and not come up with and answer to this. I was wondering if anyone has any css to enable images in a lightbox to be close by clicking outside the image rather than on the small x. I'm having an issue with my site where the x isn't visible due to my floating header, I've made it larger but it still doesn't look great! 

Many thanks in advance,

Tim.

Link to comment
On 3/31/2022 at 12:46 PM, timjphoto said:

I was wondering if anyone has any css to enable images in a lightbox to be close by clicking outside the image rather than on the small x.

Squarespace has a click event that allows users to navigate between images by clicking on the left or right of the lightboxed image to move backwards or forwards through the gallery. Because of this, they don't allow users to click outside the image to close the lightbox.

A workaround may be to reposition the close button so that it is not hidden by the header:

372452008_Screenshot2022-04-02at11_23_08.thumb.png.48ad665354fa5f7eeef871622d04bff2.png

You could do this with some CSS like this, adjusting the values to meet your needs:

.collection-type-gallery #backToThumbs {
  top: 134px;
  right: 44px;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

@paul2009 Thanks very much for your reply. The code works well, however I think I would prefer the click outside image option. My site seems to do a strange thing where clicking on the x to close images brings up a cursor on my navigation. I also don't mind losing the function to move back and forward between images. Many thanks, Tim.

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.