Simple jQuery Popup / Gallery Lightbox Plugin - Popup

A simple yet heavily customizable jQuery popup/gallery plugin which allows you to display multiple DOM elements (images or non image objects) with the same class and title attribute in a gallery lightbox with keyboard and next/prev button navigation.

How to use it:

1. Insert a group of elements with the same CSS class and title attribute into your document like so.

<img src="thumb-1.jpg" class="popup" title="gallery1"
     name="large-1.jpg" 
     longdesc="Long description here. Supports Html markups"
>

<img src="thumb-2.jpg" class="popup" title="gallery1"
     name="large-2.jpg" 
     longdesc="Long description here. Supports Html markups"
>

<img src="thumb-3.jpg" class="popup" title="gallery1"
     name="large-3.jpg" 
     longdesc="Long description here. Supports Html markups"
>

...
 	 

2. Load jQuery JavaScript library and the jQuery popup plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/popup.js"></script> 

3. Initialize the plugin with options.

$(".popup").popup({

transparentLayer : true,
gallery : true,
galleryTitle : "Gallery1 Title",
imgaeDesc : true,
galleryCounter : true,
imageDesc : true,
autoSize : false,
boxHeight : 600,
boxWidth : 500,
shadowLength : 0,
transition : 0,
onOpen : function() {
console.log("opened the box .popup");
},
onClose : function() {
console.log("closed the box .popup");
}

});

4. Style the gallery lightbox.

#popupBox {
  background: #fff;
  display: none;
  border: 3px solid #ccc
}

.contentBox {
  overflow-y: scroll;
  height: 270px
}

.popupContent { background: #fff; }

.popupContent .popClose {
  float: right;
  display: block;
  height: 16px;
  width: 16px;
  background: url(img/closeBut.jpg) no-repeat;
  text-indent: -9000px
}

.popupClose {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  height: 16px;
  width: 16px;
  text-indent: -9000px;
  background: url(img/closeBut.jpg) no-repeat
}

.galleryTitle {
  font-size: 1.3em;
  text-align: center;
}

.popupContent .pop2 {
  font-size: 1.2em;
  text-align: center;
  padding: 30px
}

.popupContent .galleryTitle { position: relative }

.galleryControls {
  overflow: hidden;
  line-height: 40px
}

.galleryControls a {
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  text-transform: uppercase
}

.galleryControls .prev {
  float: left;
  margin-left: 20px
}

.galleryControls .next {
  float: right;
  margin-right: 20px
}

.galleryControls p { text-align: center; }

.imageDesc {
  min-height: 50px;
  line-height: 15px;
  text-align: left
}

.imageDesc p {
  padding: 5px 10px;
  color: #fff;
  font-size: 12px
}

.popupBtns { padding: 20px }

.popupBtns input {
  margin-right: 20px;
  font-size: 14px;
}

5. All the plugin options.

$(".popup").popup({

// would you like a transparent layer underneath the popup?
'transparentLayer'      : true,     

// set the opacity percentage of the transparent layer
'transparentOpacity'    : 70,

// set true for navigation options between popups of the same title attribute
'gallery'       : false,    

// add a counter for gallery
'galleryCounter': false, 

// height in pixels of the gallery title box
'titleHeight'   : 30,       

// height in pixels of the gallery navigation box
'controlHeight' : 40,       

// add a description box underneath the gallery image
'imageDesc'     : false,

// set whether the box with image in it will resize to the image size
'autoSize'      : true,   

// when autoSize is set to false, 
// or no image then set the dimensions of the box in pixels
'boxWidth'      : 400,    

// when autoSize is set to false, 
// or no image then set the dimensions of the box in pixels
'boxHeight'     : 300,  

// centers the image in a fixed size box
'centerImage'   : true,    

// set the width of the padding around the box for your drop shadows
'shadowLength'  : 42, 

// transition speed from one box to the next
'transition'    : 500,    

// custom class for the popup box
'popupID'       : 'popupBox',   

//  custom class for the popup content
'contentClass'  : 'popupContent',

// class the close button has
'closeBox'      : 'popupClose',     

// set whether you want to be able to close the box or not  
'hasCloseButton': true,     

// set whether the box centers itself when the browser resizes
'centerOnResize': true,     

// file path to the loading image
'loaderPath'    : 'loader.gif',   

 // "hidden" or "visible", can set the css overflow attribute on or off
'overflow'      : 'visible',

// allows user to specify an ajax call to a resource
'ajax'  : false,    

// jQuery needs the data type to be specified
//  http://api.jquery.com/jQuery.ajax/
'ajaxType'      : "text",   

// allow for the user to specify the top position of the popup
'fixedTop'      : false,   

// allow for the user to specify the left position of the popup
'fixedLeft'     : false,   

// call back function when the box opens
'onOpen': function() {}, 

// call back function when the box closes
'onClose'       : function() {}

});

Change log:

2016-10-19

1. restrict keyboard events on not galleryCircular

---

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