Tips for using Nivo Slider on a page

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
6/7/2014 6:59:31 AM
Gravatar
Total Posts 533
feet planted firmly on the ground

Tips for using Nivo Slider on a page

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!

6/7/2014 7:18:43 AM
Gravatar
Total Posts 18439

Re: Tips for using Nivo Slider on a page

The nivo settings in the image gallery can easily be changed from theme.skin. See Image Gallery Display Settings. Specifically, the NivoConfig setting is where you put any nivo settings that would be inside the {} that you wired up manually. But leave out the brackets {} since they are already provided and leave out the javascript comments.

6/14/2014 3:35:33 PM
Gravatar
Total Posts 533
feet planted firmly on the ground

Re: Tips for using Nivo Slider on a page

Thanks Joe that's useful to know.

It would be good to include a mention of that on the page where it talks about Nivo support in the Image Gallery: https://www.mojoportal.com/using-nivo-slider

You must sign in to post in the forums. This thread is closed to new posts.