Responsive & Flexible jQuery Lightbox Plugin - Nivo Lightbox

Nivo Lightbox is a simple yet robust and featured jQuery lightbox plugin that automatically detects the type of your content and display it in a responsive modal window with amazing animations.

The Upgraded version is now available. Fully compatible with jQuery 3+ and touch-enabled.

Features:

• Responsive design for all the modern devices.
• Supports any html elements, youtube/vimeo videos, iframe, ajax content and lightbox gallery.
• Amazing CSS3 transition animations: fade, fadeScale, slideLeft, slideRight, slideUp, slideDown, and fall.
• Lightweight, easy to setup and retina-ready.
• Fully customizable and themeable via CSS and javascript.

You might also like:

• Beautiful jQuery Image Zoom Plugin - Nivo Zoom
• Nivo Slider - Awesome jQuery Slider Plugin

Basic Usage:

1. Include the jQuery javascript library and jQuery Nivo Lightbox plugin in the head section of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="nivo-lightbox.js"></script>

2. Include the basic CSS and theme CSS files in the page.

<link href="nivo-lightbox.css" rel="stylesheet" type="text/css">
<link href="themes/default/default.css" rel="stylesheet" type="text/css">

3. Insert a resource (image, video, external link, etc.) with a link in your page. The plugin will automatically detect the type of the resource and show it in the lightbox.

<a href="1.jpg" title="Image Caption"><img src="thumb-1.jpg" alt="" /></a>

4. If you want to display your images in a lightbox gallery, make sure to specify the same data-lightbox-gallery attribute in the <a> tags.

<a data-lightbox-gallery="myGallery" href="1.jpg" title="Image Caption 1"><img src="thumb-1.jpg" alt="" /></a>
<a data-lightbox-gallery="myGallery" href="2.jpg" title="Image Caption 2"><img src="thumb-2.jpg" alt="" /></a>
<a data-lightbox-gallery="myGallery" href="3.jpg" title="Image Caption 3"><img src="thumb-3.jpg" alt="" /></a>

5. Call the plugin on the a links and done.

$(document).ready(function(){
  $('a').nivoLightbox();
});

6. Configuration options with default values.

$('a').nivoLightbox({

  // The effect to use when showing the lightbox 
  // fade, fadeScale, slideLeft, slideRight, slideUp, slideDown, fall
  effect: 'fade',

  // The lightbox theme to use 
  theme: 'default',

  // Enable/Disable keyboard navigation
  keyboardNav: true,

  // Click image to close
  clickImgToClose: false,

  // Click overlay to close
  clickOverlayToClose: true,

  // Callback functions
  onInit: function(){},
  beforeShowLightbox: function(){},
  afterShowLightbox: function(lightbox){},
  beforeHideLightbox: function(){},
  afterHideLightbox: function(){},
  beforePrev: function(element){},
  onPrev: function(element){},
  beforeNext: function(element){},
  onNext: function(element){},

  // Error message
  errorMessage: 'The requested content cannot be loaded. Please try again later.'
  
});

Change log:

v1.3.1 (2016-10-05)

• [New] Added Gulpfile and minified JS + CSS
• [Changed] Moved nivo-lightbox.min.js to "dist" folder
• [Fixed] Version header info
• [New] Added `beforePrev` and `beforeNext` callbacks to allow custom transitions
• [New] Added `clickImgToClose` setting
• [Changed] Removed bower.json and added package.json
• [Fixed] Video embeds for sites using HTTPS
• [Fixed] Added support for "youtube-nocookie" domain

v1.2.0 (2014-05-15)

• update.

---

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