ClassyLightbox - Fun images, fun lightbox

ClassyLightbox is  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

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: class.pm

1. INCLUDE JS AND CSS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.classylightbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classylightbox.min.css" />

2. HTML

<a href="big_image.jpg" class="lightbox">
    <img src="thumb_image.jpg" />
</a>

3. JAVASCRIPT

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

4. OPTIONS

• 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

5. CALLBACKS

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

6. EXAMPLE

$.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>