How to Set Maximum Size in Lightbox

Written by vail joy
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Set Maximum Size in Lightbox
Lightbox scripts are an elegant way to display your portfolio, galleries or artwork. (Comstock Images/Comstock/Getty Images)

Lightbox is a general term referring to a "modal" window that overlays a Web page when an image is clicked, displaying a larger version of the image. The original jQuery script, now called "Lightbox 2," has served as a basis for many other scripts that have since been released, such as PrettyPhoto, Litebox and Slimbox. Each script is written with its own unique styles and variables and may have different methods for controlling the maximum size of images. PrettyPhoto, for example, allows you to set a default height and width in the configuration script inserted into the head of your HTML document. With Lightbox2, modifications must be made to the script to allow an image to adjust to the viewer's screen size.

Skill level:


  1. 1

    Download the newest version of the Lightbox script from the official Lightbox2 page. Extract the script folder, and open it to locate the "lightbox.js" file. Open the file in a HTML or text editor.

  2. 2

    Locate the following lines of code around line 262 of the script file:

    this.lightboxImage.width = imgPreloader.width;

    this.lightboxImage.height = imgPreloader.height;

    Place your cursor at the beginning of each line and type two forward slashes to disable the code:

    //this.lightboxImage.width = imgPreloader.width;

    //this.lightboxImage.height = imgPreloader.height;

  3. 3

    Enter a new line below the two lines you have disabled. Copy and paste the following code to the new line:

    if (imgPreloader.width > 850)

    imgPreloader.width = 800;

    if (imgPreloader.height > 620)imgPreloader.height = 600;

    By default, this updated code will set your maximum width and height to 800 pixels wide by 600 pixels high. To adjust the values to your desired dimensions, add 50 to your desired width and edit the first numerical value. Edit the second value with the exact width. Edit the third and fourth values with your desired height value, adding 20 to the third value. The additional pixels allow for padding of the Lightbox container.

  4. 4

    Save the script file and open the "lightbox.css" file located in the "css" folder. Add a "max-height" and "max-width" declaration to the "#lightbox img" selector and set the values to your chosen height and width. For example:

    lightbox img{ width: auto; height: auto;max-width:800px;max-height:600px;}

  5. 5

    Save the file and access your Web server. Rename the existing "lightbox.js" and "lightbox.css" files on your server a fail-safe in the event something goes wrong with your edited files. Upload your modified files, then clear your browser cache. Test your changes by clicking on a Lightbox-enabled image and continue to tweak the styles as desired.

Tips and warnings

  • To figure out which styles you can modify to change your Lightbox appearance, open a Lightbox image on your page and use the Opera browser or the Firebug add-on for Firefox to right-click the image and choose "Inspect Element." Note the CSS code snippet that appears in the right-hand side of the code window and change it in your "lightbox.css."

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.