ClassyLightbox
Fun images, fun lightbox!

ClassyLightbox is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that can be used for displaying images, HTML content, maps, and videos in a lightbox style that floats as an overlay on the web page.

Currently supports:

• images and image galleries
• inline HTML
• iFrames
• Youtu.be, Youtube, Vimeo, MetaCafe, Dailymotion, uStream, Twitvid, Wordpress videos
• Google Maps and Streetview, Bing Maps

Download it

Open a SWF movie
Open an iFrame
Open Youtube video
Open Google Maps
Open Google Street View
Open Bing Maps

First you need to include the jQuery library, since ClassyLightbox is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyLightbox javascript and the CSS file, which you can do it by adding the code below to your page.

As the last step, you trigger the lightbox() function on the elements you want. In this case, we trigger the function on all the images with the class lightbox.

$('.lightbox').lightbox();

• Parameters

  ---

• width - width of the lightbox in pixels. Add a trailing p (ex 50p) for percent
• height - height of the lightbox in pixels. Add a trailing p (ex 20p) for percent
• modal - clicking the overlay will not close the lightbox, default is false
• autoresize - auto-resize the big images, default is true
• move - move the lightbox when the user scrolls the page, default is true
• maximized - display the full size image by default if the image is big, default is false
• iframe - open an iframe URL inside the lightbox, default is false
• buttons - array of button objects to be added to the lightbox

• Callbacks

  ---

• onOpen - callback function to be called when the lightbox opens
• onClose - callback function to be called when the lightbox closes

$.lightbox("big_image.jpg", {
    onOpen: function() {
        console.log("Event 'onOpen' fired.");
    },
    onClose: function() {
        console.log("Event 'onClose' fired.");
    },
    width: 800,
    height: 600
    buttons: [
        {
            class: 'openurl',
            html: 'open in new window',
            callback: function(url, object) {
                window.location.href = url;
            }
        }
    ]
};

All the options can be passed in the URL or data- HTML attribute

Open page in iFrame