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

Advertisements

9 thoughts on “Change Lightbox 0.5 Image Size

  1. maccio man says:

    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;
    }

  2. maccio man says:

    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;
    }

  3. Ayyaz Zafar says:

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s