reduce resolution of display Images.

Nov 8, 2010 at 9:55 PM
Edited Nov 8, 2010 at 9:56 PM

I need to display smaller images after someone clicks on the thumbnail. Right now it shows the full resolution of the image. I just need the images to show up as 1024x800 after clicking on the thumbnails.

Where do I change this? I tried to change it at several places in CSS but nothing seems to be working. Any help will be appreciated.

Thank you!

Nov 12, 2010 at 12:48 PM
durgeshRani wrote:

I need to display smaller images after someone clicks on the thumbnail. Right now it shows the full resolution of the image. I just need the images to show up as 1024x800 after clicking on the thumbnails.

Where do I change this? I tried to change it at several places in CSS but nothing seems to be working. Any help will be appreciated.

Thank you!

Ihave the same issue so interested in any comments

Apr 22, 2012 at 12:01 AM

Hey,

Had to do this tonight.

In file 
js/nf.lightbox.js  

take a look at the method: 
function _resize_container_image_box(intImageWidth, intImageHeight) {

My problem was that some of my images were way to large so and a very quick fix for this was to add:

if (intWidth > 1000) {
                intWidth = 1000;
                intHeight = 700;
                $('#lightbox-image').css({ width: 900 });
            } else {
                $('#lightbox-image').css('width', '');
            }

to this method: 

 

function _resize_container_image_box(intImageWidth, intImageHeight) {
            // Get current width and height
            var intCurrentWidth = $('#lightbox-container-image-box').width();
            var intCurrentHeight = $('#lightbox-container-image-box').height();
            // Get the width and height of the selected image plus the padding
            var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image�s width and the left and right padding value
            var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image�s height and the left and right padding value
            // Diferences

            if (intWidth > 1000) {
                intWidth = 1000;
                intHeight = 700;
                $('#lightbox-image').css({ width: 900 });
            } else {
                $('#lightbox-image').css('width', '');
            }

            var intDiffW = intCurrentWidth - intWidth;
            var intDiffH = intCurrentHeight - intHeight;
            // Perfomance the effect
            $('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight }, settings.containerResizeSpeed, function () { _show_image(); });
            if ((intDiffW == 0) && (intDiffH == 0)) {
                if ($.browser.msie) {
                    ___pause(250);
                } else {
                    ___pause(100);
                }
            }

            $('#lightbox-container-image-data-box').css({ width: intWidth });
            $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intHeight + (settings.containerBorderSize * 2) - 32 });
        };

 

 

What it does, is for any images with a width >1000, it sets the width to 1000. This may or may not be enough for you. For example, if the height of the width was huge but the image was narrow, you would still have an issue - but again, you could change the above to suit this scenario too.