Close gallery light box by clicking out side image.

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.

Hi. CSS can't solve this problem

If you use a Business Plan or higher, let me know, we will try some JavaScript code

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:

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

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

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

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. 

I would also be interested in the Javascript, many thanks!