Versatile & Flexible jQuery Lightbox/Modal Plugin - Popup

asPopup is a jQuery plugin for creating a responsive lightbox & modal window to present any Html elements like images, iframe, photo gallery, Ajax content and inline element. The plugin is released under the GPL licence.

Basic Usage:

1. Load the necessary jQuery library and jQuery asPopup's Javascript & CSS in the Html page.

<link rel="stylesheet" href="css/asPopup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery-popup.js" type="text/javascript"></script>

2. Load the optional jQuery asPopup's extensions if you wish to add touch swipe, keyboard navigation and image thumbnail support.

<script src="src/jquery-popup-move.js" type="text/javascript"></script>
<script src="src/jquery-popup-keyboard.js" type="text/javascript"></script>
<script src="src/jquery-popup-thumbnail.js" type="text/javascript"></script>

3. Create a basic image lightbox with an image preloader. Pass the options via data-* attributes in the IMG tag.

<a class="popup" href="img/1.jpg"
    data-popup-transition="zoom"
    data-popup-options="title:'this is a image',
    ui:'inside',
    skin:'skinRimless'
">
    <img src="img/1-thumbnail.jpg" alt="" />
</a>

4. Initialize the plugin to enable the image lightbox.

$(document).ready(function() {
  $('.popup').popup();  
});

5. Available options. You can pass these options as key/value object to $.Popup() method. It is also possible to modify defaults directly at Popup JS file

$(document).ready(function() {
$('.popup').popup({
skin: 'default',
winBtn: true,
keyboard: true,
preload: false,
fullScreen: false,
fullSize: false,
imagePreload: false,
closeText: 'x',
loadingHtml: '<img src="Loading.gif" />',
errorHtml: '<p style="width:500px;height:300px;text-align:center;background-color:#aaa;line-height:300px;">Error</p>',
modalEffect: 'we-fadeScale', // fadeScale slideIn fall flip rotate
thumbnail: false,

// type settings
ajax: {
// expect return html string
render: function(data) {
 return $(data);
},
options: {
 dataType: 'html',
 headers: {
'popup': true
 }
}
},
swf: {
allowscriptaccess: 'always',
allowfullscreen: 'true',
wmode: 'transparent',
},
html5: {
width: "100%",
height: "100%",

preload: "load",
controls: "controls",
poster: '',

type: {
 mp4: "video/mp4",
 webm: "video/webm",
 ogg: "video/ogg",
},

// example
// source: [
//{
// src: 'video/movie.mp4',
// type: 'mp4', // mpc,webm,ogv
//},
//{
// src: 'video/movie.webm',
// type: 'webm',
//},
//{
// src: 'video/movie.ogg',
// type: 'ogg',
//}
// ]
source: null
});
});

Change log:

2014-09-06

• Update.

---

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