Applying a border to an image within a Lightbox

I am building a new photography website to replace my existing website. I am using Squarespace 7.1 and I have chosen to display my images using the Gallery:Strips view. I have now loaded all these into the gallery and I would still like to use a lightbox to offer the viewer the opportunity to view the images separately.

All the images in the gallery itself do not have a border as it is more aesthetically pleasing to see them this way, but I was wondering is it possible to add additional coding so when images are displayed within the lightbox, they also have a border wrapped around the edge of the image (not around the lightbox). Ideally I would be looking at a plain solid white border around the edges

It will be my intention to use a business plan if this helps with any suggested coding advice

thank you

Hello @JImmy_S,

From what I know about coding this should be possible with CSS, and I think you're all set to inject code with a business plan, so should be able to get the desired result.

Thank you for the reply. I’ve been looking online for suitable coding but not found anything yet, so will have to keep looking

Add this code to Website Tools (under Not Linked) > Custom CSS

/* Strips lightbox border */
.gallery-lightbox-item-img.content-fit {
    border: 2px solid black;
}

Tuanphan

thank you for the response. When I added the code, it was applying the border to the lightbox and not the image. I found a previous thread and alternative code and this partially worked but I have now amended this by adding an extra line in the CCS Code so the border is now only around the image which is what I was looking for. The code I used was........

.gallery-lightbox-item img {
  border-radius: 0%;
  border: 25px solid white;
  width: unset !important;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 

I have tried the lightbox in desktop mode and works great but I cannot get the images to display correctly when in a lightbox  using the mobile view as the image size is not being resized and as you can see from the screenshot. Is there further code that can be inserted to correct this anomaly

Much appreciated 

Think I've solved it adapting some code you posted on a thread a couple of years back. Apart from the image caption not sitting under the border in mobile view, it seems to be working ok now. Not sure how to adjust the caption but can live with it if I have to

/* Resize lightbox images on mobile */
@media screen and (max-width:800px) {
.gallery-lightbox-item img {
    width: 100% !important;
    border: 10px solid white;
    height: auto !important;
    box-sizing: border-box;
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
}
 

Thanks again for all your support, it really is appreciated

Can you share link to page? I can check it again easier