Nivo Slider

Nivo Slider is a JavaScript (jQuery) program for displaying a picture gallery or animated banner on your web page. The pictures are animated using a few different transition effects. It is available free of charge under the MIT license. A commercial plugin for WordPress is also available under the GNU GPL 3 license.

Downloading and installation

You can download the program from Nivo Slider homepage. Click on the big button "Free Download" (or choose "Pricing" in the top menu). In the "jQuery Plugin" section click "Download". You will download an archive called "nivo-slider<version>.zip". Unzip the archive in a working directory on your computer.

The files "jquery.nivo.slider.js" and "jquery.nivo.slider.pack.js" contain the program. You should use one of them (not both!). Both versions contain the same program; they are only differently formatted. The version "jquery.nivo.slider.pack.js" is shorter -- if you don't want to make any changes to program, and you want to save bandwidth, you should use this one. The version "jquery.nivo.slider.js" is easier to read -- if you want to make changes in the JavaScript code, you should use this. (Note: If you want only small changes, maybe you don't have to change the original code. Some small changes can also be achieved by calling the program with different parameters, modifying the stylesheet, or running a short script after you run the original code.)

To install a Nivo Slider gallery on your web page you need the following:

jQuery library
it is included in the downloaded package, in the "demo" subdirectory, but you may also try a different version
Nivo Slider jQuery plugin
either the "jquery.nivo.slider.js" or the "jquery.nivo.slider.pack.js" file (not both!) from the downloaded package
Nivo Slider stylesheet(s)
the file "nivo-slider.css" from the downloaded package; optionally also some theme CSS file from the downloaded package; or your own custom CSS file
the pictures
for gallery or banners you can use any pictures that a browser can handle in a HTML "img" tag (such as JPEG, PNG, GIF...), but they should all have the same size and no transparent parts (the transparent parts would look strange in some transition effects)

Then, create a HTML page like this:

<!DOCTYPE html>
<html>
 <head>
  <title>Nivo Slider Gallery</title>
  <link rel="stylesheet" media="screen" type="text/css" href="nivo-slider.css">
  <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
 </head>
 <body>
  <div id="ns1" class="nivoSlider">
   <img src="01.jpeg" alt="first picture">
   <img src="02.jpeg" alt="second picture">
   <img src="03.jpeg" alt="third picture">
  </div>
  <script type="text/javascript">
   $(window).load(function() {
    $('#ns1').nivoSlider();
   });
  </script>
 </body>
</html>

Any problems? Check carefully the filenames of jQuery and Nivo Slider JavaScript files, Nivo Slider CSS file, and image files. If they have a different file name (or file extension, for images), edit the HTML page accordingly. If they are in a different directory than the HTML page, provide correct relative links. (You should also provide relevant "alt" attributes for pictures.)

In this example "ns1" is an identifier for this gallery. You can use any other value, just make sure that the value used in the "div" tag is the same as the value used in the script below the tag. The identifiers are useful if you want to have more then one gallery on the same page. (You should give each gallery a unique identifier, for example "ns1", "ns2" etc.)

viliam@bur.sk