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.

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

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.

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

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 (for ex 50p) for percent
• height - height of the lightbox in pixels. Add a trailing p (for 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': '<span>open in new window</span>',
            'callback': function(url, object) {
                window.location.href = url;
            }
        }
    ]
};

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

<a href="big_image.jpg?lightbox[width]=50p&lightbox[height]=50p&lightbox[modal]=true&lightbox[maximized]=true&lightbox[autoresize]=false" class="lightbox">
    <img src="thumb_image.jpg" />
</a>

<a href="page.html" 
    data-rel="gallery"
    data-title="This is the title"
    data-options="{'width':600, 'height':400, 'iframe': true}"
    class="lightbox">Open page in iFrame</a>