Clean and Powerful jQuery Lightbox Plugin - ClassyLightbox

ClassyLightbox is a powerful and fully configuration jQuery Lightbox plugin that supports ajax content, draggable lightbox (jQuery UI needed), fading background overlay, etc.

Basic Usage:

1. Include jQuery library and jQuery UI library (optional, only for draggable lightbox functionality) on the web page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery ClassyLightbox Plugin on the web page

<script src="js/jquery.classylightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classylightbox.css" />

3. Create a html element to trigger the lightbox

<input id="alert" type="button" value="Click Me" />

4. The javascript

<script>
$(document).ready(function() {
ClassyLightbox.init({
// width of the lightbox in pixels
width: 0,

// height of the lightbox in pixels
height: 0,

// clicking the overlay will not close the lightbox
modal: false,
force: '',

// auto-resize the big images
autoresize: true,

// move the lightbox when the user scrolls the page
move: true,

// display the full size image by default if the image is big
maximized: false,

// open an iframe URL inside the lightbox
iframe: false,
flashvars: '',
ratio: 1,

// callbacks
onOpen: function() {
},

onClose: function() {
}
});
$('#alert').click(function() {
alert('Hello World');
});
});
</script>

---

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