Nivo Slider

Note: This is an advanced feature. You'll need some experience with HTML and CSS in order to implement it without assistance.

Adding & Customizing Nivo Slider

Enable Site Scripts

This solution features javascript, so you'll want to email webhelp@med.unc.edu to verify that both javascript and the script tag have been enabled on your site—they're disabled by default. If the script tag is not enabled, Nivo Slider won't work on your site.

Add the Code to Your Site

To display a slider, you'll need to add some HTML to the page (or news item, event item, or portlet) of your choosing. At the heart of this code is a <div> that contains images. Note that only images, or images wrapped in links, are allowed within the "slider" div. Any other HTML will break the slider. You can add the code below to produce a slider with the default settings—and in this case, three linked images, with HTML captions:

<!-- Plugin must be referenced! -->
<script src="http://www.med.unc.edu/webguide/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Slider html with images and optional links -->
<div id="slider-wrapper">
     <div class="nivoSlider" id="slider">
          <a href="../education" style="border-bottom: medium none; text-decoration: none; ">
               <img src="images/hero_som_education4.jpg" title="#education" /> 
          </a>
          <a href="../research" style="border-bottom: medium none; text-decoration: none; ">
               <img src="images/hero_som_research4.jpg" title="#research" /> 
          </a>
          <a href="../patientcare" style="border-bottom: medium none; text-decoration: none; ">
               <img src="images/hero_som_patient_care4.jpg" title="#patientcare" /> 
          </a>
     </div>  
</div>
<!-- Optional captions -->
<div class="nivo-html-caption" id="education">
     <a href="http://www.med.unc.edu/www/education" style="border-bottom: medium none; 
     color: rgb(51,51,51); text-decoration: none; "><b>Education.</b></a> Research. Patient Care.
</div>
<div class="nivo-html-caption" id="research">
     Education. <a href="http://www.med.unc.edu/www/research" style="border-bottom: medium none; 
     color: rgb(51,51,51); text-decoration: none; "><b>Research.</b></a> Patient Care.
</div>
<div class="nivo-html-caption" id="patientcare">
     Education. Research. <a href="http://www.med.unc.edu/www/patientcare" style="border-bottom: 
     medium none; color: rgb(51,51,51); text-decoration: none; "><b>Patient Care.</b></a>
</div>
<!-- Loads slider with desired settings-->
<script type="text/javascript">
     jq(window).load(function() {
          jq('#slider').nivoSlider({
               effect:'fade',
               animSpeed: 500,
               pauseTime: 9000,
               pauseOnHover: false,
               directionNav: false,
               controlNav: false,     
               captionOpacity: 1
          });
     });
</script>

Default Settings

The javascript portion of the code contains the following parameters, which are editable:

• effect: 'fade' 
• animSpeed: 500
  
• pauseTime: 9000
• pauseOnHover: false
• directionNav: false
• controlNav: false
• captionOpacity: 1

animSpeed and pauseTime values are in milliseconds. For captionOpacity, 1 is 100% opaque, and 0 invisible, so a value in between will give alpha transparency. Visit the Nivo Slider project site for more on all of the parameters and values available.

Captions

Captions are optional. There are two different kinds:

• To add a 'simple' caption to an image, you just need to add a title attribute (title="")to the image. That title will read as a caption as long as captionOpacity is set to 1.
• To add an HTML caption (used in the example code above) simply set the title attribute to the ID of an element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the class "nivo-html-caption" applied, and must be outside of the slider div.

Styling

The default styling of the code above will give you a slider that is:

1. 250 pixels in height
2. Has a blue, 1px border
3. Has a blue background, visible when an image ends
4. Has a light blue bar across the bottom for captions

Though that's the default styling, any of these parameters can be customized with CSS. 

<div id="slider-wrapper" style="height: 176px; border: 1px solid #666666; background: #cccccc;">

Images

To avoid the abrupt ending of images against the blue background (at wide screen sizes), it's advisable to either:

• Format images to be very wide, so the slider background never shows, or
• Format images so that the right edge of every photo fades to the background color (#d6e5f3 by default)

[top]

Additional Information

Visit the Nivo Slider project site for the full list of features and more on all of the customizations available. The Nivo Slider jQuery plugin was created by Gilbert Pellegrom, and is made freely available under the MIT open source license. 

[top]

Simplified Nivo Slider

This is an example of a simplified nivo slider without any links or captions. Several of our standard (1500 x 176 pixel) hero graphics were used in this example.

Add the Code to Your Site

<!-- Plugin must be referenced! -->
<script src="http://www.med.unc.edu/webguide/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- Slider html and images -->
<div id="slider-wrapper" style="height: 176px; border: 1px solid #666666;">
     <div class="nivoSlider" id="slider">
          <img src="http://www.med.unc.edu/webguide/images/HeroDeansOffice.jpg" /> 
          <img src="http://www.med.unc.edu/webguide/images/HeroStuaffMd.jpg" /> 
          <img src="http://www.med.unc.edu/webguide/images/HeroCME3.jpg" /> 
          <img src="http://www.med.unc.edu/webguide/images/HeroDeansOffice2.jpg" /> 
          <img src="http://www.med.unc.edu/webguide/images/Hero_CARES.jpg" /> 
     </div>  
</div>

          
<!-- Loads slider with desired settings-->
<script type="text/javascript">
     jq(window).load(function() {
          jq('#slider').nivoSlider({
               effect:'fade',
               animSpeed: 500,
               pauseTime: 9000,
               pauseOnHover: false,
               directionNav: false,
               controlNav: false,     
               captionOpacity: 0
          });
     });
</script>

Please note in the above code that the height and border have been customized with inline css.