Change Lightbox 0.5 Image Size

Update 2011: For those people who had problems with the below instructions.. please find in on my website here. And when you’re there take a look at my site and see what you think about it 🙂

Lightbox 2 has the functionality to set maximum width and height. But what about previous versions? To set the maximum image width and height for lightbox (version 0.5) you need to do some extra coding yourself. Open the jquery.lightbox-0.5.js file and search for the next pieces of code (in bold below):

    settings = jQuery.extend({
        maxWidth: null,
        maxHeight: null,
    ...

Then search for the next function (in bold) and write copy and paste the code underneath it:

    function _resize_container_image_box(intImageWidth,intImageHeight) {
        //rescale if necessary
        if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
	    var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
	    var scale = isWider ?  settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
	    intImageWidth = intImageWidth * scale;
	    intImageHeight = intImageHeight * scale;
         }

         $('#lightbox-image').height(intImageHeight);
         $('#lightbox-image').width(intImageWidth);
    ...

With the above code added, now you can specify the maximum image size when calling a new lightbox instance with the next code:

    $('.yourClass a').lightBox({
        maxHeight: 500,
        maxWidth: 700
    });

You can also set the maximum width and height according to the user’s screen width and height by using the following code:

    $('.yourClass a').lightBox({
        maxHeight: screen.height * 0.9,
        maxWidth: screen.width * 0.9
    });

Resources: here

Hello, nice to meet you

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

14 Comments

  1. Because I just give the code:

    if(intImageHeight > screen.height)
    {
    WysDzielnik = screen.height/intImageHeight;
    intImageHeight = screen.height;
    intImageWidth = intImageWidth * WysDzielnik;
    }

    if(intImageWidth > screen.width)
    {
    SzerDzielnik = screen.width/intImageWidth;
    intImageWidth = screen.width;
    intImageHeight = intImageHeight * SzerDzielnik * 0,8;
    }

    Reply
  2. Sorry, no last entry:

    if (intImageHeight> screen.height)
    {
    WysDzielnik = screen.height / intImageHeight;
    intImageHeight = screen.height;
    intImageWidth = intImageWidth * WysDzielnik;
    }

    if (intImageWidth> screen.width)
    {
    SzerDzielnik = screen.width / intImageWidth;
    intImageWidth = screen.width;
    intImageHeight = intImageHeight * SzerDzielnik;
    }

    Reply
  3. I set $(‘.gallery a’).lightBox({ maxHeight: 20, maxWidth: 20});

    but its not working its still showing the original size
    please help me

    Reply
  4. Hi,
    I tried youur solution but it doesn’t work for me.
    i did it but i use practicaly the css:

    in the function ‘_resize_container_image_box’ i add the code you gave to us:
    “page_width=window.innerWidth;
    page_height=window.innerHeight;
    if((page_width != null && page_height != null) && (intImageWidth > page_width || intImageHeight > page_height)){
    var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
    var scale = isWider ? page_width/intImageWidth : page_height/intImageHeight;
    intImageWidth = intImageWidth * scale;
    intImageHeight = intImageHeight * scale;
    }

    and at the end of the function i add other thing:

    $(‘#lightbox-container-image-box’).css({ ‘max-width’: intWidth, ‘max-height’:intHeight });
    $(‘#lightbox-container-image-box img’).css({ ‘max-width’: intImageWidth, ‘max-height’:intImageHeight });

    Reply
  5. hi,
    for me i tried this solution but it doesn’t work correctly.
    so i did it other way:
    in the function “_resize_container_image_box” i add practically the same code :
    ” //rescale if necessary
    page_width=window.innerWidth;
    page_height=window.innerHeight;
    if((page_width != null && page_height != null) && (intImageWidth > page_width || intImageHeight > page_height)){
    var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
    var scale = isWider ? page_width/intImageWidth : page_height/intImageHeight;
    intImageWidth = intImageWidth * scale;
    intImageHeight = intImageHeight * scale;
    }”

    and at the end of this function i add also:

    $(‘#lightbox-container-image-box’).css({ ‘max-width’: intWidth, ‘max-height’:intHeight });
    $(‘#lightbox-container-image-box img’).css({ ‘max-width’: intImageWidth, ‘max-height’:intImageHeight });”

    Reply
  6. I know this is an old tread, hope its still being watched.

    Thanks I tried it and it worked, but just one issue.

    The image is now resized perfectly, but the description block remains at the original image’s position.

    any idea how to fix that?

    Reply

Leave a Reply