I've just been playing with Nivo slider for the first time, trying to get a slideshow onto a page (not in the header). At first I tried using the Image Gallery feature as described here, however I found no way of altering the slider settings using this method (and I don't want the defaults). After a bit of trial and error, I've found a simple way of getting a self-contained Nivo Slider onto a page without altering the layout.master (i.e. without loading the javascript on all pages, and without enforcing the same Nivo settings on every instance). Here it is in case it is useful to anyone.
1. Assuming you are using a recent mojoPortal, add a Custom JavaScript feature to the page. In the raw script, add this:
<script src="/ClientScript/jqmojo/jquery.nivo.slider.pack3-2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Make the sure the option to "Add Script Element Around Raw Script?" is unchecked. I don't think it matters where to position the script, but I've not tested this.
If you are not using a recent mojoPortal and so don't have the Custom JavaScript feature, I also found that this javascript works fine if just added to the same HTML Content feature as the HTML below.
2. Add the following into your skin's style.config if not already present:
<file cssvpath="/Data/style/nivoslider/default/default.css" imagebasevpath="/Data/style/nivoslider/default/">none</file>
3. Add the HTML for the images to the page, along these lines:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href='/Data/Sites/1/media/GalleryImages/14/FullSizeImages/banner_1.jpg'><img src='/Data/Sites/1/media/GalleryImages/14/WebImages/banner_1.jpg' alt='piccie 1' title='piccie 1' /></a>
<a href='/Data/Sites/1/media/GalleryImages/14/FullSizeImages/banner_2.jpg'><img src='/Data/Sites/1/media/GalleryImages/14/WebImages/banner_2.jpg' alt='piccie 2' title='piccie 2' /></a>
<a href='/Data/Sites/1/media/GalleryImages/14/FullSizeImages/banner_3.jpg'><img src='/Data/Sites/1/media/GalleryImages/14/WebImages/banner_3.jpg' alt='piccie 3' title='piccie 3' /></a>
...etc etc etc...
</div>
<div id="htmlcaption" class="nivo-html-caption"></div>
</div>
</div>
I did this using an HTML Content feature, set so it doesn't use the WYSIWYG editor.
A tip for creating this easily: I used the Image Gallery feature first, to bulk upload my images and set captions, then I copied and pasted the HTML from the page source, then removed the Image Gallery from the page.
The only change needed was in the ID of the DIV with class="nivoSlider", which the Image Gallery creates as id="ctl00_mainContent_ctl00_pnlNivoInner" and which instead needs to be id="slider" (obviously change this if you have more than one on the page).
4. If you then want to customise the Nivo settings, adjust the Custom JavaScript as follows (this includes most of the likely settings you might want to tweak; see http://docs.dev7studios.com/jquery-plugins/nivo-slider for info):
<script src="/ClientScript/jqmojo/jquery.nivo.slider.pack3-2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'random,fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // 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: 'Previous', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
});
});
</script>
Hope this helps, but if I just missed a way of altering the Nivo settings when using the Image Gallery feature, please let me know!