jQuery Lightbox Image Size : Limit the max size of Image

Question

I have images which are larger than the screen's viewport, when using them with jQuery Lightbox, the images are showing up in the original size, and hence to see the complete image one needs to scroll horizontally and vertically. I have tried using the CSS tweaks available online but they do not seem to be working. I tried the following code.

#lightbox-container-image-box {
  max-width:900px ! important; // Or your max-width
}

#lightbox-container-image img {
 max-width:675px ! important; // (your max width - 20)
}

So, what I want to do is set a maxWidth and maxHeight to the lightbox view, ideally do not want to change the lightbox.js file as it is being used at multiple other places.

Solution 1

If it is the plugin by Lokesh Dhakar for me the css script below has solved the problem.

At end of file lightbox.css you write this

#lightbox-container-image-box {
    max-width: 80%;
    height:100% !important;
}
#lightbox-container-image img {
    max-width: 100%; 
}
#lightbox-container-image-data-box{ 
    max-width:80%; margin-bottom:50px;
}

Warning: #lightbox-container-image-box and #lightbox-container-image-data-box must have the same max-width

if you want you can set max-width in px.

GitHub project link

Website project link

Solution 2

try adding width %

#lightbox-container-image-box {
  max-width:900px ! important; // Or your max-width
  width: 100%; //use 100% of even 90% , see what works for you
}

#lightbox-container-image img {
 max-width:675px ! important; // (your max width - 20)
 width: 100%; 
}

Solution 3

if you have all them images with small size and want to show in large size then test it find these lines in jquery.colorbox.js

photo.style.width = photo.width + 'px'; photo.style.height = photo.height + 'px';

comment the hight line for image ratio like

//photo.style.height = photo.height + 'px';

and increase image width with ratio hight photo.style.width = photo.width+200 + 'px';

Solution 4

I know the question was asked a year ago, but since @Sompuperoo answer helped me, it might be usefull to others.

Here is what I used (In my case the image was larger than screen size) :

#lightbox-container-image-box {
    max-width: 100%;
    height:100% !important;
}
#lightbox-container-image img {
    max-width: 100%; 
}

View more solutions

Comments

[Munjal]

The images are showing up in all cases only if the original size of image is larger than the user's screen size, then image rendered by lightbox needs to be resized so that it fits into the user's screen. We need compatibility only for web brosers, we have a different mobi site