Using Nivo Slider

Nivo Slider is a popular jQuery plugin that does a nice slide show of images with cool transitions. You could implement your own custom solution using Nivo Slider in mojoPortal, but we also have some built in integration to make it easier.

Using Nivo Slider in layout.master

The layout.master file is the outer skeleton of html for your site or page. In cases where you want the slide show to be a major feature of your site design such as a slide show in the header of your site, the best place to put Nivo Slider is directly in the layout.master file of your skin, and we have a built in control you can use to make it easy.

1. Create a folder at /Data/Sites/[SiteID]/media/nivoimages (the name of the folder can be whatever you want but for web folders and files its best to use no spaces in the names)

2. Put images that you want to use as slides into the folder created in step 1 either using ftp or the file manager. Note that Nivo expects all the images to be the same size.

3. Put this control into layout.master file where you want the slideshow to be:

<portal:NivoSlider ID="NivoSlider1" runat="server" ImageFolder='~/Data/Sites/1/media/nivoimages' ImageWidth='618px' />

set the image width to the correct width for your images

4. add one of these in the style.config file of your skin if it doesn't already have one:

<file cssvpath="/Data/style/nivoslider/default/default.css" imagebasevpath="/Data/style/nivoslider/default/">none</file>

or

<file cssvpath="/Data/style/nivoslider/orman/orman.css" imagebasevpath="/Data/style/nivoslider/orman/">none</file>

alternatively create your own custom css to style Nivo

Using Custom Effects

If you want to change the effects used in your Nivo Slider, you can append a configuration setting to the <portal:NivoSlider declaration like this example that specifies a "fade" effect:

config = "effect: 'fade'"

So with the added configuration, your layout.master declaration might look like this:

<portal:NivoSlider ID="NivoSlider1" runat="server" ImageFolder='~/Data/Sites/1/media/nivoimages' ImageWidth='618px' config = "effect: 'fade'" />

The complete list of available effects is listed on this NivoSlider support page.

Thanks to mojoPortal member Robt for finding this and explaining it in this forum thread.

Using Nivo Slider in the Image Gallery

There are several gallery features included in mojoPortal, the one named "Image Gallery" has built in support for Nivo Slider. You just check a box in the settings to enable it. Make sure your style.config file has one of the Nivo themes as in step 4 above. 

Note that Nivo expects the images to be all the same size, in the Image Gallery it will use the Web size image created automatically when you upload the full size image. You can configure the size of Web size images in the settings of the Image Gallery, but it will not change the size of images that were already uploaded, so its best to configure those settings for the desired image size before you upload any images.