Let your images slide

Composite.Media.NivoSlider displays images in a slider on a page using Nivo Silder, a highly customizable slider plugin for jQuery.

You can choose to show images from a folder in the Media Archive or - with some customization in XSLT - images from various sources located on both your and other websites.

You can specify what transition effects to use when slide images. You can switch between CSS-based themes it comes with, and change the slider's width and height (in the default theme).

How to implement

  1. Edit a page.
  2. Insert the Composite.Media.NivoSlider function ( Insert | Function), or add the following 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 for the default theme: The width of the slider. Applicable for the "default" theme only.
    • Height for the default theme: The height of the slider. Applicable for the "default" theme only.
    • Show navigation: If "true", the navigation buttons appear below the slider ("true" by default)

Themes

Apart from the "default" theme, you can choose "orman" and "paskal" themes available in the "CSS theme" parameter - to present your images  in the slider.

Unlike the flexible "default" theme, the "orman" and "paskal" are of fixed type, which means that they display images in a fixed-sized  frame: orman - (568x268px), paskal - (630x235px).

If the images have sizes greater than specified for these two themes, then the oversized parts will be hidden off from the display area. If this does not work for you, we recommend that you use the "default" theme where you can specify the width and height you need.

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/.

Requirements

Composite C1 version 2.1.1 or later

SHARE