Resizing Lightbox images
I’m using Lightbox2 in my newest project to show images. The images, though, are way too big to show in their original size. I was surprised that I couldn’t find a property or something in the code to resize the images. After some researching on Google and figuring out a resize calculation, I made the following adjustments to the code to resize my images without having to resize each one of them before uploading:
Lightbox.css
Change:
#lightbox img{ width: auto; height: auto;}
To:
#lightbox img{ max-width: 600px; }
Lightbox.js
Change:
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
To:
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(600, imgPreloader.height / (imgPreloader.width/600));
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
I choose to always show the images with a width of 600px. So, if you want a different width, then change the 600 to the number you choose. You can also go with a height in stead of a width, but then you have to change the calculation formula a bit and use the max-height property in the CSS file.
