CODEWITHSUNDEEP
jquerycsslightbox
Probocop
Probocop

Reputation: 10552

Lightbox - Is it possible to force resize the image?

Does anybody know how to force resize the image that opens in lightbox either in CSS or by hacking lightbox?

I know it's not a good solution to having a fixed image size (should be done on upload) but it is a specific requirement of a client.

Thanks.

Upvotes: 2

Views: 33959

Answers (7)

pradeep
pradeep

Reputation: 136

<style>
    .lb-outerContainer { max-width:690px; max-height:520px; }
    .lb-image{ width:500px!important; max-height:500px!important;}
</style>

Upvotes: 3

Joozy
Joozy

Reputation: 11

Find these lines in jquery.colorbox.js

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

and replace with

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

remove image hight and increase image width using + sign.

Upvotes: 0

JP Silvashy
JP Silvashy

Reputation: 48495

In your CSS you can have the image size adjust to fill the maximum width while still maintaining the same aspect ratio like this:

img {width:100%; height:auto}

As long as the container is a block this should adjust the image size. Be aware it may look pixilated in older browsers because the image scaler used in those browsers relies on "nearest neighbor" sampling to scale the images.

Upvotes: 1

F&#225;bio Nicolau de Lima
F&#225;bio Nicolau de Lima

Reputation: 1494

I used this code with slimbox2:

#lbImage {

    width:320px;
    height:240px;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    -moz-background-size: cover;

}

Upvotes: 0

Sujay sreedhar
Sujay sreedhar

Reputation: 3518

Add this to css:

#lightbox-container-image img { width:auto; max-height:520px; }

Upvotes: 4

Alex Weber
Alex Weber

Reputation: 2186

Rather than using css, just resize the image using jquery's width() and height() methods on the image element.

Before you do that I'd recommend dividing one by the other to get the ratio, so you don't distort the image! :)

Upvotes: 0

Steven
Steven

Reputation: 19425

It's not a bad solution having fixed size. Just set max-height or max-width (in CSS) to whatever (but not both)- The image will then scale correctly.

But all images must be same format, otherwise height / width may vary.

And if you set fixed size in CSS (width, height), then the images will be scewed.

Upvotes: 1

Related Questions