Full-featured Responsive Lightbox Plugin - jQuery rbox

Rbox is an open-source, full-featured, and highly customizable jQuery lightbox plugin that allows you to create various types of popups, such as image lightboxes, video popups, lightbox galleries, or any other custom popups.

The name "Rbox" comes from "Responsive" and "lightbox". It's compatible with any kind of contents like images, galleries, videos, iframes, AJAX content, inline content, etc. Check out the demo to see examples.

How to use it:

1. To get started, load the Rbox plugin's files in the document.

<link rel="stylesheet" href="/path/to/jquery-rbox.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-rbox.js"></script>

2. Create a SINGLE image lightbox.

<a href="" 
   class="example" 
   data-rbox-image="original.jpg" 
   data-rbox-caption="Captions support <strong>HTML</strong>">
  <img src="thumb.jpg" alt="Example Image" />
</a>

$(".example").rbox({
  'type': 'image',
});

3. Create a gallery lightbox from a series of images.

<a href="" 
   class="example" 
   data-rbox-image="original 1.jpg" 
   data-rbox-caption="Captions support <strong>HTML</strong>"
   data-rbox-series="gallery">
  <img src="thumb 1.jpg" alt="Example Image" />
</a>
<a href="" 
   class="example" 
   data-rbox-image="original 2.jpg" 
   data-rbox-caption="Captions support <strong>HTML</strong>"
   data-rbox-series="gallery">
  <img src="thumb 2.jpg" alt="Example Image" />
</a>
... more images ...

$(".example").rbox({
  'type': 'image',
});

4. Display any HTML content inside the lightbox.

<a class="example" 
   data-rbox-html="<p><em>HTML</em> elements can be added <strong>here</strong>.</p>">
   Click Me
</a>

$(".example").rbox({
  'type': 'html',
});

5. Create an AJAX popup that loads content from an external page via AJAX requests.

<a href="" 
   class="example" 
   data-rbox-ajax="test.html">
   Click Me
</a>

$(".example").rbox({
  'type': 'ajax',
});

6. Create an inline lightbox that loads content from the existing DOM element within the document.

<a href="" 
   class="example" 
   data-rbox-inline="#element">
   Click Me
</a>

<div id="element">
  Inline Content Here
</div>

#element { display: none; }

$(".example").rbox({
  'type': 'inline',
});

7. Create an HTML5 video lightbox.

<a href="" 
   class="example" 
   data-rbox-video="1.mp4" 
   data-rbox-autoplay="true"
   data-rbox-videoposter="custom-poster.jpg"
   data-rbox-width="480" 
   data-rbox-height="360"
  >
   Click Me
</a>

$(".example").rbox({
  'type': 'video',
});

8. Create an iframe lightbox (like Youtube Video lightbox).

<a href="" 
   class="example" 
   data-rbox-iframe="https://www.youtube.com/embed/Y2j8bLCGx1U?rel=0&controls=0&showinfo"
   data-rbox-width="560" 
   data-rbox-height="315"
  >
   Click Me
</a>

$(".example").rbox({
  'type': 'iframe',
});

9. All possible plugin options.

$(".example").rbox({

  // gallery series
  'series': '', 

  // image, iframe, html, inline, or ajax
  'type': 'image',

  // path to the image
  'image': '',

  // path to the iframe URL
  'iframe': '',

  // html content
  'html': '',

  // path to the video
  'video': '',

  // inline content
  'inline': '', 

  // path to the ajax data source
  'ajax': '',

  // optional caption
  'caption': '',

  // width/height
  'width': 0,
  'height': 0,

  // path to the video poster
  'videoposter': '',

  // enable autoplay
  'autoplay': false,

  // whether to use fitvids plugin (must be included)
  'fitvids': false, 

  // loading text
  'loading': 'Loading...',

  // close the lightbox on click outside
  'closeonoverlay': true,

  // shows close button
  'closebtn': true,

  // close the lightbox by pressing ESC key
  'closeonesc': true,

  // custom nav icons
  'navmarkup' : ['❌', '◀', '▶'],

  // CSS class for the close button
  'closebtnclass' : '',

  // custom bg color
  'bgcustom': 'rgba(0, 0, 0, 0.8)',

  // custom inner bg color
  'bgcustominner' : '#fff',

  // animation class
  // add your own CSS3 animations here
  'animate': '',
  
});

10. All possible plugin options.

$(".example").rbox({

  // gallery series
  'series': '', 

  // image, iframe, html, inline, or ajax
  'type': 'image',

  // path to the image
  'image': '',

  // path to the iframe URL
  'iframe': '',

  // html content
  'html': '',

  // path to the video
  'video': '',

  // inline content
  'inline': '', 

  // path to the ajax data source
  'ajax': '',

  // optional caption
  'caption': '',

  // width/height
  'width': 0,
  'height': 0,

  // path to the video poster
  'videoposter': '',

  // enable autoplay
  'autoplay': false,

  // whether to use fitvids plugin (must be included)
  'fitvids': false, 

  // loading text
  'loading': 'Loading...',

  // close the lightbox on click outside
  'closeonoverlay': true,

  // shows close button
  'closebtn': true,

  // close the lightbox by pressing ESC key
  'closeonesc': true,

  // custom nav icons
  'navmarkup' : ['❌', '◀', '▶'],

  // CSS class for the close button
  'closebtnclass' : '',

  // custom bg color
  'bgcustom': 'rgba(0, 0, 0, 0.8)',

  // custom inner bg color
  'bgcustominner' : '#fff',

  // animation class
  // add your own CSS3 animations here
  'animate': '',
  
});

---

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