jQuery Rebox Plugin Examples

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

Dynamically add images after the fact

During page interactions you can add to your container element and new images will be pickedup (But not during an open modal):

Add an image
$('#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); });