jQuery.imgBox

Yet another lightbox alternative.

View the Project on GitHub tsi/jQuery.imgBox

imgBox is a jQuery gallery plugin that implements a smooth zoom effect on images. download it, try it, let me know what you think.

Demo

This is imgBox as it comes out of the box, each row is configured with slightly different options.
See the 'Options' section below for more... well, options.

Image 1 of 9 Image 2 of 9 Image 3 of 9 Image 4 of 9 Image 5 of 9 Image 6 of 9 Image 7 of 9 Image 8 of 9 Image 9 of 9

Usage

  1. Include the necessary files:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="imgBox/jquery.imgbox.js"></script>
    <link rel="stylesheet" href="imgBox/imgbox.css" />
    
  2. Add some images, each containing a thumbnail linked to the bigger image. You can set the title using the title attribute:

    <a title="Lorem ipsum dolor sit amet" href="big_image1.jpg"><img src="thumb1.jpg"/></a>
    <a title="Consectetur adipiscing elit" href="big_image2.jpg"><img src="thumb2.jpg"/></a>
    <a title="Vivamus tincidunt massa in turpis" href="big_image3.jpg"><img src="thumb3.jpg"/></a>
    

    Note: This is the simplest form, imgBox is designed to play just as well with more complex html structure (e.g. ul > li > a > img etc.).

  3. Apply the imgBox effect:

    $("a").imgbox();
    

Options

You may pass these options to control the look and feel of the imgBox effect:

$("a").imgbox({
  padding: 10,               // Set the padding/transparent border around the image.
  border: 2,                 // Set the solid border around the image.
  alignment: 'center',       // Position - may be auto OR center.
  allowMultiple: false,      // Allow opening multiple imgBoxes.
  autoScale: true,           // Scale the image to fit the available space.
  speedIn: 500,              // Set the zoom-in speed.
  speedOut: 500,             // Set the zoom-out speed.
  easingIn: 'swing',         // Set the zoom-in animation easing.
  easingOut: 'swing',        // Set the zoom-out animation easing.
  zoomOpacity: false,        // If true, changes image transparency when zooming.
  overlayShow: true,         // Display an overlay under the imgBox.
  overlayOpacity: 0.7,       // Set overlay opacity.
  hideOnOverlayClick: true,  // Hide imgBox when the overlay is clicked.
  hideOnContentClick: false, // Hide imgBox when the image is clicked.
  slideshow: true,           // Display next/previous controls.
  theme: 'light'             // Choose a color scheme (light/black).
});

Credit

The plugin was originally created by jQueryGlobe (2009).
This fork (2.x) was written by Tsachi Shlidor (@shlidor).

License

Dual licensed under the MIT and GPL (it's free).