Responsive & Flexible jQuery Lightbox Plugin - Nivo Lightbox

Responsive & Flexible jQuery Lightbox Plugin - Nivo Lightbox
File Size: 60.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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:

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)


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