Customizable Lightbox That Supports Any Content - Zoombox

Zoombox is an easy-to-use yet feature-rich, highly customizable jQuery lightbox plugin that supports any media types: Text, Images, HTML5 Videos, Youtube/Vimeo Videos, Iframe contents and much more.

More features:

• Gallery modes. It means that you can switch between lightbox content just like a slider.
• Image preview.
• 5 built-in themes to fit your web design.
• Autoplay videos when opened.
• Keyboard interactions.
• Smooth open/close animations.
• Loading spinner.

How to use it:

1. To get started, include jQuery JavaScript library and the jQuery Zoombox plugin at the bottom of the webpage.

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

2. Attach the function zoombox to the media links and done.

<a class="zoombox" title="This is an image" href="1.jpg"><img src="1.jpg" class="thumb" /></a>
<a class="zoombox" href="https://www.youtube.com/watch?v=mTktq2TqLkg" title="Hey this is youtube !">Youtube</a>
<a class="zoombox" href="https://vimeo.com/205627512" title="Hey this is vimeo !">Vimeo</a>
...

$(function(){
  $('a.zoombox').zoombox();
});

3. Or using the $.zoombox.open(link) method.

$.zoombox.open('1.jpg');

4. To display HTML content in the lightbox, use the $.zoombox.html(content) method.

$.zoombox.html('<strong>Hi !</strong><p>This is HTML content !</p>');

5. Change the default themes. All possible themes:

• zoombox (default)
• lightbox
• prettyphoto
• darkprettyphoto
• simple

$('a.zoombox').zoombox({
  theme: 'simple'
});

6. Customize the lightbox by overriding the following options.

$('a.zoombox').zoombox({

  // overlay opacity
  opacity: 0.8,    

  // the duration of the animation              
  duration: 800,

  // enable/disable the animation
  animation: true,

  // width/height of the lightbox
  width: 600,
  height: 400,

  // enable/disable image preview in gallery mode
  gallery: true,

  // enable/disable video autoplay
  autoplay: false, 

  // allow images bigger than screen
  overflow: false  
               
});

7. Close the lightbox manually.

$.zoombox.close();

---

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