Rebox - jQuery or Zepto tiny small simple responsive lightbox

Ever need a lean, simple, quick lightbox for images that is responsive, delegates, pretty, no required images, includes captions? That is exactly what Rebox does. 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.

The final thing you should know.. Rebox comes from REsponsive lightBOX.

Get Started

Highly Recommended

Subscribe to my newsletter and follow me @practicalweb.

Donation

Has Rebox been helpful to you?

Download

• Download or Fork on Github

Just include the js and css file along with either Zepto or jQuery. After that you're all set for the examples below!

When using Zepto you need to include fx and fx_methods outside of the basic build. Also if you want touch swipe guestures include the touch module. I suggest using Zepto Builder to create a clean build.

Version

Version 0.1

Last updated on 03/20/2014

jQuery Rebox is currently available for use in all personal or commercial projects under MIT license.

• MIT License

Examples

Single Initialization

Create a single lightbox, individually on each image:

$('#gallery1 a').rebox();

Gallery Initialization

Create a gallery style lightbox:

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

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

// don't worry about the following, it just injects a new img..
var counter = 0;
$('#gallery3Add').on('click', function(e){
	e.preventDefault();
	var images = ['a','b','c','d'],
		letter = images[counter++ % images.length];
	$('#gallery3').append(
		'<a href="media/sample_'+ letter +'.jpg" title="Image '+ letter +'">'+
			'<img src="media/sample_'+ letter +'_thumb.jpg" />'+
		'</a> '
		);
});

Custom Content

Using templates you can show images, videos, or anything. By default only the "image" template is implemented.

First you need to add a template type. Each type is a function that is passed the current item that needs to be shown (the thumb image), current Rebox settings, and a callback you must call when your new jquery object is created. The scope of the callback must be this new element. If you want the callback to execute immediately just use jquery's .each().

Next on your gallery links you need to set the template to use with the data attribute: data-rebox-template="video" By default all .

Using this function approach to templates you're able to do your post creation work to the new content when needed.

/*
<div id="gallery4" class="gallery">
	<a href="media/sample_a.jpg" data-rebox-template="video" title="Caption for image A">
		<img src="media/sample_a_thumb.jpg" />
	</a>
</div>
*/
$('#gallery4 a').rebox({
	templates:{
		video: function($item, settings, callback){
			var url = $item.attr('href').replace(/\.\w+$/,'');
			return $('<video class="'+ settings.theme +'-content" controls preload="metadata" '+
  							'poster="'+url+'.jpg">'+
						'<source src="'+url+'.webm" type="video/webm" />'+
						'<source src="'+url+'.mp4" type="video/mp4" />'+
						'Your browser does not support the HTML5 video tag'+
					'</video>').on('loadeddata', callback);
		}
	}
});

Events Example

Click through the gallery with your console open to view the events:

$('#gallery5').rebox({ selector: 'a' })
	.on('rebox:open', function(e, rx){ console.log(e.type, rx); })
	.on('rebox:close', function(e, rx){ console.log(e.type, rx); })
	.on('rebox:goto', function(e, rx, i, $item, $img){ console.log(e.type, rx, i, $item, $img); });

The 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);
		}
	}
}

The 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' });

The 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){});