Rebox - Light weight responsive lightbox

jQuery Rebox is a light weight, responsive, mobile friendly jQuery and Zepto lightbox that uses delegation.

Instead of using a rediculous amount of javascript to restrict image sizes within the window, Rebox uses css max-width. The design requires no images, although if you want to reskin it you can. This keeps the library clean, and simple.

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

Source: trentrichardson.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" media="all" type="text/css" href="jquery-rebox.css" />
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-litelighter.js"></script>
<script type="text/javascript" src="jquery-rebox.js"></script>

2. HTML

<div id="gallery2" class="gallery">
	<a href="media/sample_a.jpg" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
	<a href="media/sample_b.jpg" title="Caption for image B"><img src="media/sample_b_thumb.jpg" /></a>
	<a href="media/sample_c.jpg" title="Caption for image C"><img src="media/sample_c_thumb.jpg" /></a>
	<a href="media/sample_d.jpg" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>
</div>

3. JAVASCRIPT

$('#gallery2').rebox({ selector: 'a' });

4. OPTIONS

{
    theme: 'rebox',        // class name parent gets (for your css)
    selector: null,        // the selector to delegate to, should be to the <a> which contains an <img>
    prev: '&larr;',        // use an image, text, whatever for the previous button
    next: '&rarr;',        // use an image, text, whatever for the next button
    loading: '%',          // use an image, text, whatever for the loading notification
    close: '&times;',      // use an image, text, whatever for the close button
    speed: 600,            // speed to fade in or out
    zIndex: 1000,          // zIndex to apply to the outer container
    cycle: true,           // whether to cycle through galleries or stop at ends
    captionAttr: 'title'   // name of the attribute to grab the caption from
    template: 'image',     // the default template to be used (see templates below)
    templates: {           // define templates to create the elements you need function($item, settings)
        image: function($item, settings, callback){ 
            return $('<img src="'+ $item.attr('href') +'" class="'+ s.theme +'-content" />').load(callback);
        }
    }
}

5. METHODS

// Initialize a rebox instance
$el.rebox({});

// Enable a rebox, generally you don't have to call this
// but if you want to enable and disable this could be useful
$el.rebox('enable');

// Disable a rebox. Again you generally don't need this
// but if you want to enable and disable this could be useful
$el.rebox('disable');

// Go to the next image in the queue
$el.rebox('next');

// Go to the prev image in the queue
$el.rebox('prev');

// Go to a specific index in the queue
$el.rebox('goto', 4);

// Destroy a rebox
$el.rebox('destroy');

// Get or set an option. When value is provided a Set takes place
// If only the key is provided the value will be retrieved
$el.rebox('option', key, value);

// if an object is passed each setting will be applied
$el.rebox('option', { speed: 500 });

// set global defaults
$.rebox.setDefaults({ theme: 'mytheme' });

6. EVENTS

// when the control is opened
$el.bind('rebox:open', function(e){});

// when the control is closed
$el.bind('rebox:close', function(e){});

// when the control changes image, passes the index as second parameter
$el.bind('rebox:goto', function(e, i){});

// when the control is disabled
$el.bind('rebox:disable', function(e){});

// when the control is destroyed
$el.bind('rebox:destroy', function(e){});