Output scaled images

Nov 24, 2009 at 5:01 PM


I really like the simplicity of this gallery control. However, I have a huge amount of pictures and they are all huge in size. The result of this is that when I click on one of the pictures, my whole screen gets filled with a picture and I have to scroll forever to close the image.

Can I get a quick hint on where I can insert some code to scale down the image before sending it to the browser?

Jun 22, 2010 at 8:18 PM

I have exactly the same issue. Does somebody know how to scale down an image in the popup screen?

Aug 1, 2010 at 4:33 PM

After a cursory glance, I'm guessing it's in this area:

objImagePreloader.onload = function () {
                $('#lightbox-image').attr('src', settings.imageArray[settings.activeImage][0]);
                _resize_container_image_box(objImagePreloader.width, objImagePreloader.height);
                objImagePreloader.onload = function () { };


You'd still eat the bandwidth cost of loading up the full size image, but it will scale using the height and width properties on the img tag.


Of course, you could write another httpHandler similar to ImageHandler to do the scaling on the fly...

Aug 2, 2010 at 1:58 AM

In Gallery.js, replace this:

a.attr('href', this.get_folderUrl() + this._files[i]);


with this:

a.attr('src', this.get_handlerUrl() + '?path=' + this.get_folderUrl() + '&size=' + [maxsize] + '&pos=' + i);


That will re-use the thumbnailhandler code to resize the image to the maximum size.  You'll still need to modify the code above because it will still draw the box the size of the original image.