Easy jQuery Gallery Lightbox with Auto Image Resizing

Just another jQuery gallery lightbox plugin for displaying multiple images in a popup box that has the ability to auto resize the popup according to the height of your images. With centerOnResize option, the plugin will center the popup box when you resize the browser window. Ajax content and DOM element content are supported as well.

How to use it:

1. Include the required resources in the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/popup2.2.js"></script>

2. Create the html for an image gallery and use name attribute to specify the source of large image that will be displayed in the popup box. All the images with the same CSS class and title attribute will be linked into the navigation structure of this gallery.

<div> 
<img src="img/thumb-1.jpg" name="img/1.jpg" class="popup" title="Gallery" longdesc="Html Description Goes Here" /> 
<img src="img/thumb-2.jpg" name="img/2.jpg" class="popup" title="Gallery" longdesc="Html Description Goes Here" /> 
<img src="img/thumb-3.jpg" name="img/3.jpg" class="popup" title="Gallery" longdesc="Html Description Goes Here" />

...
</div>

3. Call the plugin and set the options.

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".popup").popup({
transparentLayer : true,
gallery : true,
galleryTitle : "Gallery1 Title",
imgaeDesc : true,
galleryCounter : true,
imageDesc : true,
autoSize : true,
boxHeight : 600,
boxWidth : 500,
shadowLength : 0,
transition : 0,
onOpen : function() {
console.log("opened the box .popup");
},
onClose : function() {
console.log("closed the box .popup");
}
});
});
</script>

4. All the options with default values.

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".popup").popup({
transparentLayer      : true,             // would you like a transparent layer underneath the popup?
transparentOpacity    : 70,               // set the opacity percentage of the transparent layer
gallery               : false,            // set true for navigation options between popups of the same title attribute
galleryCounter        : false,            // add a counter for gallery
titleHeight           : 30,               // height in pixels of the gallery title box
controlHeight         : 40,               // height in pixels of the gallery navigation box
imageDesc             : false,            // add a description box underneath the gallery image
autoSize              : true,             // set whether the box with image in it will resize to the image size
boxWidth              : 400,              // when autoSize is set to false, or no image then set the dimensions of the box in pixels
boxHeight             : 300,              // when autoSize is set to false, or no image then set the dimensions of the box in pixels
centerImage           : true,             // centers the image in a fixed size box
shadowLength          : 42,               // set the width of the padding around the box for your drop shadows
transition            : 500,              // transition speed from one box to the next
popupID               : popupBox,       // custom class for the popup box
contentClass          : popupContent,   // custom class for the popup content
closeBox              : popupClose,     // class the close button has
hasCloseButton        : true,             // set whether you want to be able to close the box or not  
centerOnResize        : true,             // set whether the box centers itself when the browser resizes
loaderPath            : loader.gif,     // file path to the loading image
overflow              : visible,        // "hidden" or "visible", can set the css overflow attribute on or off
ajax                  : false,            // allows user to specify an ajax call to a resource
ajaxType              : "text",           // jQuery needs the data type to be specified - http://api.jquery.com/jQuery.ajax/
fixedTop              : false,            // false/integer : allow for the user to specify the top position of the popup
fixedLeft             : false,            // false/integer : allow for the user to specify the left position of the popup
onOpen                : function() {},    // call back function when the box opens
onClose               : function() {}
});
});
</script>

---

This awesome jQuery plugin is developed by dansdom. For more Advanced Usages, please check the demo page or visit the official website.