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.

Answer 1

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%; 
}

Answer 2

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

Answer 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';

Answer 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%; 
}

Answer 5

After spending a lot of time in trying to make lightbox responsive, I had to give up, script is too old and unadequate.

Now I'm using Featherlight: https://noelboss.github.io/featherlight/ , almost identical to lightbox but fully responsive (and also very easy to use).

JSFiddle demo: https://jsfiddle.net/2pznx9vL/

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<a href="https://hdfreewallpaper.net/wp-content/uploads/2016/10/Norway-Balloon-Beautiful-Scenery-Wallpaper.jpg" data-featherlight="image"><IMG SRC="https://hdfreewallpaper.net/wp-content/uploads/2016/10/Norway-Balloon-Beautiful-Scenery-Wallpaper.jpg" style='width:150px'><br>click on image</a>