Clean and Powerful jQuery Lightbox Plugin - ClassyLightbox

File Size: 641 KB
Views Total: 2507
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></script>
<script src=""></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

$(document).ready(function() {
// 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');

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