Pure Slider
-
Pure Slider Documentation
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.