Adding a Frame to Images in Lightbox

PhilCorleyPhotoPhilCorleyPhoto Registered Users Posts: 107 Major grins
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

Comments

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins

    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

    https://www.lilleulven.smugmug.com - The Photos of my travels
Sign In or Register to comment.