Installation:
This plugin is designed for Joomla 2.5 and 3+. To install go to the Extension Manager page of Joomla Administrator and upload the package file. Then go to the Plugin Manager page and activate the plugin.
Usage:
To use this plugin as content in an article, first enable the plugin and configure the default parameters in the Plugin Manager.
To use the plugin in an article, you utilize the two tag expressions, each with a different set of attributes. They are used very similar to xhtml, with the exception that they surrounded by curly brackets.
The first tag expression is {pureslider}{/pureslider}. Notice that it has a start tag and an end tag. It has 26 attributes as follows:
| pureslider Attribute | default value | possible values |
|---|---|---|
| engine | nivo | "nivo" or "nivoo" |
| folder | images | any folder path in the Joomla root |
| all | 1 | 1 for Yes, or 0 for No |
| animSpeed | 500 | Time in seconds |
| interval | 3000 | Time in seconds |
| effect | random | random, fade, fold, sliceDownLeft, sliceDownRight,sliceUpLeft, sliceUpRight, sliceUpDownLeft, sliceUpDownRight, sliceLeftDown, sliceLeftUp, sliceLeftRightDown, sliceLeftRightUp, sliceRightDown, sliceRightUp, wipeDown, wipeUp, wipeLeft, wipeRight, sliceDown, sliceUp, sliceUpDown, sliceInRight, sliceInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse |
| pauseOnHover | 1 | 1 for Yes, or 0 for No |
| directionNav | 1 | 1 for Yes, or 0 for No |
| slices | 15 | Any integer |
| autoPlay | 1 | 1 for Yes, or 0 for No |
| cssClass | nivooSlider | The name of the css class added to Nivoo slider for styling |
| imgWidth | 600 | Any integer |
| imgHeight | 350 | Any integer |
| directionNavHide | 0 | 1 for Yes, or 0 for No |
| directionNavWidth | 20% | A percentage value |
| orientation | vertical | Either "vertical" or "horizontal" |
| theme | default | The name of the theme folder in the Nivo themes folder |
| boxCols | 8 | Any integer |
| boxRows | 4 | Any integer |
| startSlide | 0 | 1 for Yes, or 0 for No |
| controlNav | 1 | 1 for Yes, or 0 for No |
| controlNavThumbs | 0 | 1 for Yes, or 0 for No |
| manualAdvance | 0 | 1 for Yes, or 0 for No |
| prevText | Prev | Any text |
| nextText | Next | Any text |
| randomStart | 0 | 1 for Yes, or 0 for No |
The second tag expression is {slide}{/slide}. Notice that this also has a start and end tag. In addition, this expression exists inside of {pureslider}{/pureslider}, one or more times. It has 4 attributes:
| slide attribute | default value | possible values |
|---|---|---|
| name | - | file name of the file located in the folder |
| link | - | url |
| thumb | - | filepath |
| effect | - | random, fade, fold, sliceDownLeft, sliceDownRight, sliceUpLeft, sliceUpRight, sliceUpDownLeft, sliceDown, sliceUp, sliceUpDown, sliceInRight, sliceInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse |
You can also specify a caption for the images. This can be done by placing text between the slide tags. This text can also contain html, but only if you are using the Nivo (jQuery) engine, not the Nivoo (Mootools) engine. Here are some examples:
- {slide name="lansdscape.png"}<h4>Daytona Beach</h4><p>This is a great beach.</p>{/slide}
- {slide name="mountain.jpg"}This is the Himalayas mountauns.{/slide}
For a full example of how to use Easy Slider, type the following code:
{pureslider folder='images/scenary' all=1 interval=3000}
{slide name="lansdscape.png"}<h4>Daytona Beach</h4><p>This is a great beach.</p>{/slide}
{slide name="mountain.jpg"}This is the Himalayas mountauns.{/slide}
{/pureslider}Also note that attributes can be specified with single quotes, double quotes, or no quotes (if the value contains no spaces).
Parameters:
| Name | Keyword | Default Value | Description |
|---|---|---|---|
| Javascript Slider | engine | nivo | Choose either Nivo v3.2 jQuery Slider or Nivoo v1.2.1 Mootools Slider as the engine that drives Pure Slider |
| Folder | folder | images | This is the folder path where the images files to be used in the slider are located. |
| All | all | 1 | When all is set to 1 (Yes), all of the image files in the folder are used, and the slides listed are only for providing a caption. When all is set to 0 (No), only the slides listed are going to be used in the slider. |
| Animation Speed | animSpeed | 500 | The time (duration) in ms of the transition. |
| Interval | interval | 3000 | Interval in ms between the transitions, required for the Nivoo autoPlay function. |
| Effect | effect | random | Type of transition |
| Pause On Hover | pauseOnHover | 1 | Clears the interval on mouseover |
| Navigation | directionNav | 1 | Shows controls to go back and forth |
| Slices | slices | 15 | Number of the slices used for the transition |
| Auto Play | autoPlay | 1 | Start the transition automatically after initializing. |
| CSS Class | cssClass | nivooSlider | Name of the css class that is added after initializing the slider. |
| Image Width | imgWidth | 600 | Width of the images used in the Nivoo Slider |
| Image Height | imgHeight | 350 | Height of the images used in the Nivoo Slider |
| Navigation Hide | directionNavHide | 0 | Hides the navigation controls on mouseout, so they are only visible when the mouse cursor is over the slider element. |
| Navigation Width | directionNavWidth | 20% | Width of the clickable area of the directional navigation. Can be a number for pixels or a string with a percentage of the full width. |
| Orientation | orientation | vertical | Defines the direction of the transition, can be horizontal or vertical. |
| Nivo Themes | theme | default | Choose a theme to be applied to your Nivo slider. |
| Box Columns | boxCols | 8 | Columns for Box Animation. |
| Box Rows | boxRows | 4 | Rows for Box Animation. |
| Start Slide | startSlide | 0 | Set the first slide to be displayed in the Slider. Starts at 0. |
| Display Indicators | controlNav | 1 | Choose whether to display indicators for Navigation Control. |
| Thumbnail Controls | controlNavThumbs | 0 | Choose whether to use Thumbnails for Navigation Control. |
| Manual Advance | manualAdvance | 0 | Force transitions manually |
| Previous Text | prevText | Prev | Text used to indicate previous when Navigation is enabled. |
| Next Text | nextText | Next | Text used to indicate next when Navigation is enabled. |
| Random Start | randomStart | 0 | Start on a random slide. |
| Offset | offset | 0 | This is an integer to offset the number designation of the slider. Thus, if you want to show multiple articles that each have a slider, you can offset the slider ids so that they will not conflict. |