Jump to content

Close gallery light box by clicking out side image.

Recommended Posts

Posted

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.

Posted
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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

🤒 I'm currently in hospital and may not respond quickly to your posts.

Posted

@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.

  • 10 months later...
Posted
On 4/2/2022 at 5:53 PM, timjphoto said:

@tuanphan I am on a business account so if there is some JavaScript code that would be amazing. Many thanks, Tim.

Hi there, I'm interested in this as well. Is there a Javascript that did the trick? I'd appreciate to receive that, too. 

  • 5 months later...

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.