How to show images with Nivo Slider

1. Edit a page.
2. Insert the Composite.Media.NivoSlider function ( Insert | Function), or add the following code:
   Expand code

   <f:function name="Composite.Media.NivoSlider" xmlns:f="http://www.composite.net/ns/function/1.0"> 
     <f:param name="ImagesFolder" value="{Your media folder with images}" /> 
     <f:param name="Theme" value="default" /> 
     <f:param name="Effect" value="random" /> 
     <f:param name="Width" value="618" /> 
     <f:param name="Height" value="246" /> 
     <f:param name="Navigation" value="True" /> 
   </f:function>

   
   
3. In the Images folder parameter, select the Media Archive folder with images you want to display in a slider.
4. Specify other parameters if needed:
   • CSS theme: The CSS theme to use for the slider ("default" by default).
   • Effects: Transition effects to use when sliding images ("random" by default). There are 16 transition effects you can combine.
   • Width (Width of the slider): The width of the slider (shown full-width by default).
   • Height (Height of the slider): The height of the slider (shown full-width by default).
   • Show navigation: If "true", the navigation buttons appear below the slider ("true" by default)
   • Repeat: If 'true', the slideshow will repeat ('true' by default)
   • AnimSpeed (Animation speed): Slide transition speed, in milliseconds (500 by default)
   • PauseTime: How long each slide will show, in milliseconds (3000 by default)
   • DirectionNav (Show direction buttons): If 'true', the Next and  Prev buttons are shown on hover ('true' by default)
   • Captions (Show captions): If 'true', the image captions are shown over the image ('true' by default)
   • ControlNavThumbs (Show thumbnails): If 'true', the small image thumbnails are shown below ('false' by default)

Themes

Apart from the "default" theme, you can choose "bar", "light" and "dark" themes available in the "CSS theme" parameter - to present your images  in the slider:

• default: the buttons or thumbnails are shown centered below the slider
• bar: the buttons or thumbnails are shown in an auto-hiding bar below the slider
• dark: the slider and buttons or thumbnails are shown on a dark-colored background
• light: the slider and buttons or thumbnails are shown on a light-colored background

Alternatively, you can create you custom theme and add it as another option to the "CSS theme" parameter of the "Composite.Media.NivoSlider" function. For information about creating custom themes, please see "Creating custom themes for the Nivo Slider".

Important notes

1. If you do not specify the media folder in the Images folder parameter, the slider will show images explicitly specified in the Composite.Media.NivoSlider function. By default, the function shows some demo images.
2. If you want to display images form various sources located on both your and other websites, edit the Composite.Media.NivoSlider function and replace the demo images with your own within <div id="slider" class="nivoSlider">.
3. In the Composite.Media.NivoSlider function, you can create a <div> element with a specific ID (for example, "htmlCaption") to feature some HTML text that will be displayed on a specific image in the slider. For this, you need to specify this ID in the image's title attribute preceding it with '#' (for example, "#htmlCaption").
4. For more information on the Nivo Slider, please refer to its documentation at http://nivo.dev7studios.com/support/.