Tiny Responsive jQuery Lightbox Plugin - Rebox

Rebox is a tiny jQuery/Zepto plugin which enables you to display any Html elements in a responsive, mobile-friendly lightbox.

Features:

• Supports gallery lightbox and image captions.
• Customizable loading indicator.
• Themeable and highly stylable via CSS.
• Displays images, videos, or anything using templates options.
• Works with jQuery or Zepto.

Basic Usage:

1. Load the jQuery Rebox plugin's stylesheet in the head of the document.

<link rel="stylesheet" href="jquery-rebox.css">

2. Load the jQuery Rebox plugin's script after jQuery (or zepto) library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="lib/zepto.min.js"></script> -->
<script src="jquery-rebox.js"></script>

3. Load the jQuery Rebox plugin's script after jQuery (or zepto) library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="lib/zepto.min.js"></script> -->
<script src="jquery-rebox.js"></script>

4. Wrap your images into a container.

<div id="demo">
  <a href="large.jpg" title="Caption for the image"><img src="thumb.jpg"></a>
</div>

5. Call the plugin to enable the lightbox.

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

6. Options and defaults.

• 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: '←': use an image, text, whatever for the previous button
• next: '→': use an image, text, whatever for the next button
• loading: '%',: use an image, text, whatever for the loading notification
• close: '×': 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)

7. APIs.

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

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

Change log:

2017-10-27

• Fixed for jQuery 3+

2016-07-21

• Fixes background color for transparent images

2014-11-01

• fixed: close when fade is clicked, go to next if image is clicked and more than one

---

This awesome jQuery plugin is developed by trentrichardson. For more Advanced Usages, please check the demo page or visit the official website.