Getting started with the Nivo Lightbox jQuery Plugin

Install files

Add these items to the  <head> of your document. This will link jQuery and the Nivo Lightbox core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

<link rel="stylesheet" href="nivo-lightbox.css" type="text/css" /> 
<link rel="stylesheet" href="themes/default/default.css" type="text/css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="nivo-lightbox.min.js"></script>

Add markup

The Nivo Lightbox markup is actually very simple and fully accessible. You simply need to set up links as you normally would in any webpage. The Nivo Lightbox automatically detects what type of content your are trying to display.

<a href="image_large.jpg" title="This is an image title"> 
    <img src="image_thumb.jpg" alt="" /> </a> 
<a href="http://wikipedia.com">View Website</a> 
<a href="https://www.youtube.com/watch?v=L9szn1QQfas">View Youtube Video</a>

Hook up the lightbox

Lastly, add the following lines of Javascript into the  <head> of your document, below the links from Step 1.

<script> 
$(document).ready(function(){ 
    $('a').nivoLightbox(); 
}); 
</script>

...and voila! That wraps up the most basic installation of Nivo Lightbox into your webpage.