PDA

View Full Version : lytebox code to expand box for smaller images



avianrand
06-16-2010, 01:11 PM
I working on a site for an artist. She's resized the images of her work to a practical size for the web. But they vary a bit. Some are a little bit small but not tiny. The problem is that the larger ones open up to a max size in lytebox which is good. But the smaller ones open up too small which looks strange. She has a lot of images and it's not practical to go in and size each one just right for lytebox. So I was hoping Lytebox could do it for me (not actually resize the image itself, but make the Lytebox window larger to make it appear that the image has been resized). I know that if the images are very small then expanding the box too much would make the images look awful but that is not the case here. None of them are small enough for that to be a problem.

I could not find anything online that showed how to do this. So here's what I did in case it's useful to anyone. Lytebox will size its box smaller than the screen by 150px in each direction if the image is too large. But it doesn't expand smaller images and I could not find any settings that let me do that, so I added some code to lytebox.js to do this. Here it is:

} else {
imgPreloader = new Image();
imgPreloader.onload = function() {
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (myLytebox.autoResize) {
var pagesize = myLytebox.getPageSize();
var x = pagesize[2] - 250;
var y = pagesize[3] - 250;
if (imageWidth > x) {
imageHeight = Math.round(imageHeight * (x / imageWidth));
imageWidth = x;
if (imageHeight > y) {
imageWidth = Math.round(imageWidth * (y / imageHeight));
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = Math.round(imageWidth * (y / imageHeight));
imageHeight = y;
if (imageWidth > x) {
imageHeight = Math.round(imageHeight * (x / imageWidth));
imageWidth = x;
}
} else if ((imageHeight <= y) && (imageWidth <= x)) {
var imageHeightToWidth = imageHeight/imageWidth;
if (imageHeight/y <= imageWidth/x) {
imageWidth = Math.round(x);
imageHeight = Math.round((x) * imageHeightToWidth);
} else {
imageHeight = Math.round(y);
imageWidth = Math.round((y)/imageHeightToWidth);
}
}
}

I added the last 10 lines and also changed these 2 lines:

var x = pagesize[2] - 150;
var y = pagesize[3] - 150;

to this:

var x = pagesize[2] - 250;
var y = pagesize[3] - 250;

This allows the box to grow larger than the actual size of the image if it's smaller than the screen minus 250 in both directions.

I've tested this pretty thoroughly and it seems to work fine so far.

Fixes, comments, suggestions are welcome.

Avian.