jQuery rBox Demo & Documentation

General

rBox is a lightweight jQuery lightbox that was built for the usual reason:
the other lightbox plugins didn't quite cut it.

rBox supports the following formats:

Images
Image galleries, with captions
HTML5 video
Responsive iframe embed videos (via optional dependency of the super lightweight fitvids.js plugin).
HTML content
Inline content
Ajax content

rBox is really easy to customize. Per instance, you can:

Change the background overlay.
Change the background of the content box.
Easily customize the next, previous and close icons.
Disable the close button and closing the lightbox on overlay, if needed.
Add your own animations for rBox

You can also use data-attributes to activate and set options for rBox, if that's your thing!

Usage

Include latest jQuery and the jquery-rbox.js file.


// Include either in the head or just above closing body tag

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery-rbox.js"></script>

Include the jquery-rbox.css stylesheet in the head tag.


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

Initialize rbox.


$(document.ready(function() {
$('.foo').rbox();
});

Features

Responsive across devices
Can be used with inline elements, single images and videos, image and video galleries, iframes and ajax.
Really lightweight, unminified JS file is > 13kb!

Notes

The plugin has been tested in the following browsers:
Vendor prefixes have not been added to the CSS and are mostly not required, except for animations. If you're already using a tool like Autoprefixer, you won't need to bother. Otherwise, add prefixes as needed.

Options

Name	Type	Default	Description
series	string		Series can be used for image galleries, etc.
type	string		Image, video, inline, html, iframe or ajax
image	string		path to image, for type image
video	string		path to video file, for type video
iframe	string		path to iframe, for type iframe
ajax	string		URL to fetch ajax content from
html	string		add some html here
inline	string		selector for element on page whose innerHTML is the content
caption	string		optional caption
width	number	0	defined in pixels. Default width of 0 implies auto
height	number	0	defined in pixels. Default height of 0 implies auto
videoposter	string		poster image path for videos
autoplay	boolean	false	if type==video, if video should autoplay
fitvids	boolean	false	whether to use the fitvids.js plugin (needs to be included). This ensures responsive videos inside iframes. Not required for HTML5 video
closeonoverlay	boolean	true	close the lightbox on clicking the overlay
bgcustom	string	rgba(0, 0, 0, 0.8)	customize the background overlay for each instance of the rbox, if you like. use rgba for transparent backgrounds.
bgcustominner	string	#fff	customize the background overlay for each instance of the rbox, if you like. use rgba for transparent backgrounds.
namespace	string	rbox	customize the namespace used for html attributes.
loading	html string	Loading...	customize the loading message. can have html in it.
beforeopen	function	function(opts) { return opts; }	called before rbox is opened. receives opts and must returns opts
onopen	function	function() { $.noop(); }	called after rbox is opened
onclose	function	function() { $.noop(); }	called after rbox is closed
beforeclose	function	function() { $.noop(); }	called before rbox is closed

Examples

Examples: Types Examples: Customize styles and UX

Types

1. Image


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-img" data-rbox-image="test.jpg">
<img src="test.jpg" alt="Test Image" width="100">
</a>

// Option 2: In JS
$(".rbox-img").rbox({
'type': 'image'
});

Image: Add a caption: HTML is supported


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-img-caption" data-rbox-image="test2.jpg" data-rbox-caption="Captions support <strong>HTML</strong>">
<img src="test2.jpg" alt="Test Image" width="100">
</a>

// Option 2: In JS
$(".rbox-img").rbox({
'type': 'image',
'caption': 'Captions support <strong>HTML</strong>'
});

Series or Galleries

Works with all content types.


// Option 1: In Markup (with data attributes)
<span class="rbox-gal" data-rbox-image="test2.jpg" data-rbox-series="gallery">
Image Gallery
</span>
<span class="rbox-gal" data-rbox-image="test.jpg" data-rbox-series="gallery">
Image Gallery
</span>

// Option 2: In JS
$(".rbox-gal").rbox({
'type': 'image',
'series': 'gallery'
});

HTML

Demo


// Option 1: In Markup (with data attributes)
<p class="rbox-html" data-rbox-type="html" data-rbox-html="<p><em>HTML</em> elements can be added <strong>here</strong>.</p>">
Demo</p>

// Option 2: In JS
$(".rbox-html").rbox({
'type': 'html',
'html': '<p><em>HTML</em> elements can be added <strong>here</strong>.</p>'
});

AJAX

Demo


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-ajax" data-rbox-type="ajax" data-rbox-ajax="test.html">Demo</a>

// Option 2: In JS
$(".rbox-ajax").rbox({
'type': 'ajax',
'ajax': 'test.html'
});

Inline Content

Hidden Element on page


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-inline" data-rbox-type="inline" data-rbox-inline="#element-hidden">
Hidden Element on page</a>

// Option 2: In JS
$(".rbox-inline").rbox({
'type': 'inline',
'inline': '#element-hidden'
});

Inline Content with IDs

If the hidden element contains ids, place it inside a script template tag to prevent duplication of ids on the page.

Hidden content inside a script template


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-inline-script" data-rbox-type="inline" data-rbox-inline="#element-hidden-script">
Hidden Element on page</a>

// Option 2: In JS
$(".rbox-inline-script").rbox({
'type': 'inline',
'inline': '#element-hidden-script'
});

HTML5 Video

Demo


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-video" data-rbox-type="video" data-rbox-video="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4">Video</a>

// Option 2: In JS
$(".rbox-video").rbox({
'type': 'video',
'video': 'https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4'
});

HTML5 Video with Custom Videoposter

Demo


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-videoposter" data-rbox-type="video" data-rbox-video="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4" data-rbox-videoposter="https://via.placeholder.com/640x360">Video</a>

// Option 2: In JS
$(".rbox-video-videoposter").rbox({
'type': 'video',
'video': 'https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4',
'videoposter': 'https://via.placeholder.com/640x360'
});

HTML5 Video with autoplay

Demo


// Option 1: In Markup (with data attributes)

<a href="" class="rbox-video-autoplay" data-rbox-type="video" data-rbox-video="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4" data-rbox-autoplay="true">
Video with autoplay</a>

// Option 2: In JS

$(".rbox-video-autoplay").rbox({
'type': 'video',
'video': 'https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4',
'autoplay': true
});

HTML5 Video with width and height declared

Demo


// Option 1: In Markup (with data attributes)

<a href="" class="rbox-video-width" data-rbox-type="video" data-rbox-video="https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4" data-rbox-width="240" data-rbox-height="180">
HTML5 Video with width declared</a>

// Option 2: In JS

$(".rbox-video-width").rbox({
'type': 'video',
'video': 'https://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4',
'data-rbox-width': 240,
'data-rbox-height': 180,
});

Video Source here, License here.

Iframes

Demo: YouTube Video


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-iframe" data-rbox-type="iframe" data-rbox-iframe=
"//www.youtube.com/embed/D93PBlwBp8s?rel=0&controls=0&showinfo" 
data-rbox-width="960" data-rbox-height="720">Demo: Iframe (YouTube Video)</a>

// Option 2: In JS
$(".rbox-iframe").rbox({
'type': 'iframe',
'iframe': '//www.youtube.com/embed/D93PBlwBp8s?rel=0&controls=0&showinfo'
'width': 960,
'height': 720,
'caption': 'Add a caption if you like'
});

Customize styles and UX

Prevent closing lightbox on clicking the overlay

Demo


// Option 1: In Markup (with data attributes)
<a href="#" class="rbox-not-close" data-rbox-image="test.jpg">
Demo</a>

// Option 2: In JS
$(".rbox-not-close").rbox({
'type': 'image',
'image': 'test2.jpg',
'closeonoverlay': false
});

Hide Close icon

Demo


// Option 1: In Markup (with data attributes)
<a href="#" class="rbox-no-close-button" data-rbox-image="test.jpg" data-rbox-closebtn="false">
Demo</a>

// Option 2: In JS
$(".rbox-no-close-button").rbox({
'type': 'image',
'image': 'test.jpg',
'closebtn': false
});

Custom Background Color

Demo: color Demo: Image


// Option 1: In Markup (with data attributes)
<a href="#" class="rbox-custom-bg" data-rbox-type="image" data-rbox-image="test.jpg" 
data-rbox-bgcustom="rgba(255, 255, 255, 0.8)">Demo</a>

<a href="#" class="rbox-custom-bg-img" data-rbox-type="image" data-rbox-image="test.jpg" 
data-rbox-bgcustom="url(test2.jpg)">Demo</a>

// Option 2: In JS
$(".rbox-custom-bg").rbox({
'type': 'image',
'image': 'test.jpg',
'bgcustom': 'rgba(255, 255, 255, 0.8)'
});

$(".rbox-custom-bg-img").rbox({
'type': 'image',
'image': 'test.jpg',
'bgcustom': 'url(test2.jpg)'
});

Custom Background Color for Inner Content

Use for HTML, Inline, Ajax

Demo: inner content background color


// Option 1: In Markup (with data attributes)
<a href="#" class="rbox-custom-bginner" data-rbox-type="html" data-rbox-html="<p>Customize the background color.</p>" data-rbox-bgcustominner="#555">Demo</a>

// Option 2: In JS
$(".rbox-custom-bginner").rbox({
'type': 'html',
'html': '<p>Customize the background color.</p>',
'bgcustominner': '#555'
});

Custom Markup for Close, Next and Previous Icons

Use the navmarkup option to change the icons as an array of strings in the order of close, previous and next.


// Option 1: In JS
$(".rbox-gal-navmarkup").rbox({
'type': 'image',
'series': 'gallery-nav',
'navmarkup': [
              '',
              '',
              ''
              ]
});

Custom Animation

You can any animations of your choice (via classes) in your stylesheet, and reference these classes via the animate option.

Demo Rotate Demo Zoom-in


// Option 1: In Markup (with data attributes)
<a href="" class="rbox-animate-eg-rotate" data-rbox-type="image" data-rbox-image="test.jpg" data-rbox-animate="rbox-animate-rotate">Demo Rotate</a> 
<a href="" class="rbox-animate-eg-zoom-out" data-rbox-type="image" data-rbox-image="test.jpg" data-rbox-animate="rbox-animate-zoom-out">Demo Zoom-in</a>

// Option 2: In JS
$(".rbox-animate-eg-rotate").rbox({
'type': 'image',
'image': 'test.jpg',
'animate': 'rbox-animate-rotate'
});

$(".rbox-animate-eg-zoom-out").rbox({
'type': 'image',
'image': 'test.jpg',
'animate': 'rbox-animate-zoom-out'
});

Custom close class