Tiny Responsive jQuery Lightbox Plugin - Rebox

Tiny Responsive jQuery Lightbox Plugin - Rebox
File Size: 4.01 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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: '&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)

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:

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.