Change Lightbox 0.5 Image Size

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

    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);
    ...

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

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

10 Comments

• 
  hi April 6, 2011 at 3:08 pm

  It doesn’t work…

  Reply
  • 
    Clive Ciappara April 7, 2011 at 6:27 pm

    Hmm.. it should work. I tested it myself and worked fine for me. What Lightbox version are you using? This only works on Lightbox version 0.5.

    Reply
    • 
      Hiram April 27, 2011 at 4:27 pm

      I tried it as well (with jQuery Lightbox 0.5) and the lightbox stopped working.

      Reply
  • 
    Clive Ciappara May 2, 2011 at 6:26 pm

    If you’re still having this problem.. Try the code as I did it from the link above and see if it works for you.

    Reply
• 
  maccio man April 26, 2011 at 9:18 pm

  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
• 
  maccio man April 26, 2011 at 9:20 pm

  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
  • 
    Clive Ciappara May 2, 2011 at 6:25 pm

    Try the code as I did it from the link above and see if it works for you.

    Reply
• 
  Sonny Lutzop June 1, 2011 at 1:03 pm

  Great fix!

  Works perfectly. Thanks a lot.

  Reply
• 
  Ayyaz Zafar January 25, 2012 at 2:02 pm

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

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

  Reply
• 
  mandia March 1, 2012 at 12:03 pm

  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