Getting Started | Nivo Gallery

Documentation

Getting Started with Nivo Gallery

To use Nivo Gallery you have to include the following in your page:

jQuery v1.5+
Nivo Gallery script
Nivo Gallery CSS

You can do this by simply putting the following HTML in your document’s <head> section, taking care to use the correct paths for your CSS and Javascript files:

<link rel="stylesheet" href="path/to/nivo-gallery.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="path/to/jquery.nivo.gallery.min.js" type="text/javascript"></script>

Create Your Gallery

Then somewhere in the <body> section of your document, you need to create the structure of the gallery and add the content to it. Below is an example of a Nivo Gallery with some dummy content:

<div id="gallery" class="nivoGallery">
    <ul>
        <li data-title="This is an Image Slide" data-caption="Put a caption in here">
            <img src="images/1.jpg" alt="" />
        </li>
        <li data-type="html" data-title="This is a HTML Slide">
            <h1>Heading</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </li>
        <li data-type="video" data-title="Vimeo Video">
            <iframe src="http://player.vimeo.com/video/29950141?portrait=0&amp;color=ffffff" width="670" height="377" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
        </li>
        <li data-type="video" data-title="YouTube Video" data-caption="Note: Always postfix youtube video URL's with '?wmode=opaque'">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/72hTSFkYVAo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
        </li>
        <li data-type="video" data-title="HTML5 Video">
            <video width="700" height="390" controls="control" preload="none">
                <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
                <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
                <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
            </video>
        </li>
    </ul>
</div>

As you can see there a few things here that you need to notice:

Your gallery div must have the class nivoGallery added to it.
Slides are simple li elements in a unordered list. Please don’t put any other HTML in the nivoGallery div (putting HTML in certain slides is fine).
To add titles and captions to your slides you can use the data-title and data-caption attributes.
If you plan on using more than just an image in a slide (using HTML for instance), please set the data-type attribute to html.
If you want a video slide, simply paste the video embed code into a slide and set the data-type attribute to video. Don’t worry about sizing, Nivo Gallery does it all automatically. Note: Always postfix YouTube video URL’s with ?wmode=opaque.

Activate Nivo Gallery

Finally to get your gallery up and running you need to include the following code somewhere in your HTML (after you have included the scripts above):

<script type="text/javascript">
$(document).ready(function() {
    $('#gallery').nivoGallery();
});
</script>

By default the gallery has been set to have a width of 100% and a height of 400px. You can of course manually override these in your CSS by doing something like:

#gallery {
    width:700px; /* Width can be fixed px or dynamic % value */
    height:300px; /* Height must be fixed px value */
}

While the slider can be responsive if you set a flexible (%) width, it requires that you use a fixed height for the gallery to function properly. While this is not ideal, it is a requirement at the moment. As a workaround we recommend you use Media Queries to change the height of the slider at different widths.

Next: Find out about all the Options you can set when calling Nivo Gallery.