For those who haven't checked it out yet this is a great little Slider offering from Dev7 team way up in the north of Scotland - http://nivo.dev7studios.com/

I know it's had a mention in one of the recent Responsive Web thingies and I though I'd do a little documenting on how I actually got it working within an existing web page for anyone else that might be interested.

It's free for regular websites, $20 for the WordPress version.

I have it operational here >>> http://www.thelittlecashbookcompany.com/slider.html

From the link above http://nivo.dev7studios.com/, make your way to the JQuery download (392kb) & extract.

For the coding example below I've just placed the nivo-slider directory with all contents in my Projects directory (ie - in the same directory as my image & css folders, index.html etc)

======================================================
To get it operational

1. put the following in the header area
======================================================
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/demo/style.css" type="text/css" media="screen" />

======================================================
2. put the following in the body area where you want the slider to appear
======================================================
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="nivo-slider/demo/images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="nivo-slider/demo/images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="nivo-slider/demo/images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="nivo-slider/demo/images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />

</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>

</div>
<script type="text/javascript" src="nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

=========================================================
3. Some other tweaks...
=========================================================
a.
in the header area you'll notice 4 different theme css references
this connects with the body line which reads
<div class="slider-wrapper theme-default">
change the "default" to bar, dark or light for different themes/graphics
you will probably need to play with the settings for different appearances etc (haven't gone that far yet)

b.
I guess you can turn the theme lines you are not using off or just delete them.
haven't played with the nivo-slider.css to see what it looks after...

c.
in the header area... this line
<link rel="stylesheet" href="nivo-slider/demo/style.css" type="text/css" media="screen" />
you might want to edit the style.css file as it has basic css formatting for the rest of your page that will override your main css file if you are not careful.
I deleted everything down to the #dev7link { line (give the guys a plug) which leaves about 25 lines or so
in the responsive design discussion the .slider-wrapper formatting is mentioned. I haven't messed around with the responsive design thing so instead of a % width, change the fixed the width: line to a fixed pixel amount - in the case of the pixar images this was 618px. I also reduced the margin to nothing (or thereabouts). It makes sense if you are able to keep them all the same size... I guess.

d. in the body area you can see it's a real straight forward thing adding taking out slides, adding captions etc I haven't got to any formatting yet. just relieved to have it operational.

e.
in this area
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
at the bottom of the coding you can go a little crazy with this
http://nivo.dev7studios.com/support/jquery-plugin-usage/

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>

where effect in the 4th line down can be any of the following:
•sliceDown
•sliceDownLeft
•sliceUp
•sliceUpLeft
•sliceUpDown
•sliceUpDownLeft
•fold
•fade
•random
•slideInRight
•slideInLeft
•boxRandom
•boxRain
•boxRainReverse
•boxRainGrow
•boxRainGrowReverse

Any additional thoughts or ammendments would be great. There is a JQuery update http://blog.jquery.com/2012/08/09/jquery-1-8-released/ so that would be a matter of loading to the nivo-slider/demo/scripts/ directory & updating the script type line to reflect the new js file name.

Hope this might be of help/interest to someone.

Nice job Robbie. JQuery rocks.

Cheers Eric.
Love the fact that it
a. works - you wouldn't believe how long it took me
b. looks great - love the transitions
c. is well priced - could only be better if they paid me
d. is easy to customise & update
e. all the files you need can be stored with the rest of your files - nothing outside needed

Don't really know to much about JQuery other than it works & works well!