Search code examples
jqueryhtmlcsslightbox2

jQuery Lightbox 2 showing border in random images

I have used jQuery Lightbox 2 and its working fine as per requirements.

However, It shows border in some random images. Here is the screenshot.

enter image description here

And here is the lightbox css for image which they are using. 

<img class="lb-image" src="http://mywebsite/img/myimage.png">

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;
  border: 4px solid white;
}

I have found out that this line border: 4px solid white; is causing this issue. If I comment this line, then border does not show.

enter image description here

However, it is not happening for all the image if I do not comment this line. In some images its working fine having border.

enter image description here

I have also checked how the image is uploaded and here is the full image which is having issues. (However, this is happening random images I guess).

enter image description here

So here I am confused what should I do in this scenario to be able to work for both the scenarios. Should I remove border or not ? Or any other thing I can apply for the same.

Please guide me.

Solution

  • I don't think border is displayed randomly.. it just that since it's white sometimes it blands in with the image. Try to change border color to something different to verify it ie.

    border: 4px solid red;

    Also you might want to check width and hight of the LightBox - looks like it might be hardcoded to square shape - meaning if the original image is not square (1x1) then you will see some additional gaps when border is on.