Adding a Frame to Images in Lightbox

PhilCorleyPhoto · January 27, 2017

Is it possible to add a frame to an image displayed in the lightbox (and the thumbnails), so that it has a 2 px grey border, 75 px white border and then a 2 px grey border? 2/75/2 would be different for the thumbnails.

Thanks

Phil

Lille Ulven · January 27, 2017

While you can frame your lightbox-photos I would not recommend doing it. I had done it for a while, but found that portrait-format photos would create trouble as their borders would be cut off unless I would also make the photos smaller.
But nevertheless here comes my former code (though "only" with a double border, I don't quite know how to build up a triple boarder):

/*border around lightbox images only if screen size seems fitting */
@media only screen and (min-width: 0px){
  .sm-lightbox .sm-lightbox-image, .sm-lightbox .sm-lightbox-image-icon  {
    border: 2px solid grey !important; 
    outline: 75px solid white  !important;  

  }

  .sm-lightbox-image {
    /* Deaktivated, caused lightbox image to get stuck at the top.
       see if height can be pushed down to 98%, width too */
    height: 97% !important; /* in order to get the border around the photo*/
    width: 98% !important;
  }

}

You may have to change the size from the second part though, since your borders are larger than my original ones.

Good luck

Lille Ulven

Adding a Frame to Images in Lightbox

Comments