Table of contents
- Installation and adjustment
- Parameters for embedding slider into a web page
- Parameters of a configuration file
- Notes
The Sprigst Slider has a very flexible configuration system. The contents of the items can be placed in external files or it can be embed into settings. Besides, the settings can be placed into external file or it can be embed into html code of the web page. Thanks to this, you can dynamically generate the settings and the item's contents through JavaScript or PHP scripting.
Installation and adjustment
For the installation copy files(at least: sprigst-slider.swf and sprigst.js) in the directory of your site. Create files of scrolled items if they are not created yet. Also edit a configuration file of slider. Now slider is established and ready to embedding in a web-page. The scrolled item, as a rule, consists of 2 files: a file of contents (.html) and a file of styles (.css). If some items should have identical registration it is enough to create one file of styles and to use it for different items. You can refuse use of a file of styles and set parameters of registration of an item in a file of contents. You also can use a plain text, jpeg, gif, png or swf file as scrolled items.Adjustment is carried out by the instruction of parameters in a configuration file. By default the file of adjustments refers to settings.txt. There is an opportunity to set a way to a file of adjustments through a variable settingsFileName.
An example:
<script type="text/javascript">
<!--
var sld_INIT_1={
swf:'./sprigst-slider-demo.swf',
settings : './settings.txt',
width:699,
height: 133,
wmode: 'transparent'
}
var scr = new SprigstSlider(sld_INIT_1);
//-->
</script>
In a file of adjustments use of comments is supposed: the one-line comment begins with //, multi-line case begins with /* and comes to an end */.
//It is the one-line comment ... /* It is the multi-line comment */
Parameters for embedding slider into a web page
- swf - a path to slider’s swf file.
- container - a name of DIV tag were slider was put
- width - a slider’s width in pixels.
- height - a slider’s height in pixels.
- Transparent - put flash player in windowless transparent mode.
- settings - a path to settings file.
- jsonText - the string that contains slider’s settings (i. e. content of settings file as string). When it’s defined the settings variable is ignored.
Parameters of a configuration file
refreshTime
The parameter refreshTime sets an interval of scrolling in milliseconds.For example: let the interval of scrolling is equal 20 milliseconds, it means, that everyone 20 milliseconds content of slider will move on 1 pixel upwards. It corresponds to speed of updating ~50fps. If the parameter is not set, its value defined by measurement of productivity of a client computer.
direction
The parameter direction sets the scrolling direction. Values are possible is leftToRight and rightToLeft.linkLoadIn
This parameter specify name of a specific window into which the document should load by user’s mouse click. There are some special values for linkLoadIn parameter:- _self - specifies the current frame in the current window.
- _blank - specifies a new window.
- _parent - specifies the parent of the current frame.
- _top - specifies the top-level frame in the current window.
controls
The section controls contains settings of a slider control buttons. It includes parameter autoHide- true - slider will hide control buttons, when user roll out the mouse outside slider.
- false - control buttons will be shown constantly.
- forward - includes parameters of forward control button. That is:
- src - URL to a file used as the button image. Formats are supported: jpeg, gif, png and swf (including animated).
- align - sets an placement of button image inside slider. Values are possible is top, center, bottom.
- backward - set parameters of backward control button. That is:
- src - URL to a file used as the button image. Formats are supported: jpeg, gif, png and swf (including animated).
- align - sets an placement of button image inside slider. Values are possible is top, center, bottom.
background
The section background contains tinctures of a scroller background. It includes the following parameters:- color - sets color of a background
- src - URL to a file used as the background image. Formats are supported: jpeg, gif, png and swf (including animated)
- x,y - set coordinates of the background image in scroller (a position of the top left corner of the image). Cancel action of parameter align.
- align - sets an arrangement of the background image. Values are possible:
- tl - at the upper left
- tc - above on the centre
- tr - at the upper right
- cl - on the centre at the left
- cc - on the centre
- cr - on the centre on the right
- bl - below at the left
- bc - below on the centre
- br - below on the right
...
"background":{
"src":"bground.swf",
"x":"20",
"y":"50",
"align":"tl",
"color":"0xffdfaa"
}
...
In the given example on a background of orange colour (0xffdfaa) the image from a file bground.swf in a position with coordinates x = 20 and y = 50 is placed. The parameter align is ignored since parameters x and y are set.
leftSideheading
- src - URL to a file used as the sideheading image. Formats are supported: jpeg, gif, png and swf (including animated).
- align - sets an placement of sideheading image inside slider. Values are possible is top, center, bottom.
rightSideheading
- src - URL to a file used as the sideheading image. Formats are supported: jpeg, gif, png and swf (including animated).
- align - sets an placement of sideheading image inside slider. Values are possible is top, center, bottom.
itemsCommonCfg
The section itemsCommonCfg contains the general for all scrolled items adjustments. Includes parameters:- delay - sets an interval in milliseconds for stopping each item in center of slider. When parameter don't specified or value set to 0, slider will scroll items smoothly.
- css - URL to a file of styles
- style - the CSS text. If defined parameter css is ignored.
- width - width in pixels of text and htlm items
- align - sets an placement of image items inside slider. Values are possible is top, center, bottom.
- bgColor - colour of a background of scrolled items
- onRollOverBgColor - colour of a background scrolled items at prompting the cursor of the mouse
- borderColor - colour of a framework of scrolled items
- onRollOverBorderColor - Color of a framework of scrolled items at prompting the cursor of the mouse
...
"itemsCommonCfg":{
"css":"./contents/sample_0.css",
"bgColor":"0xffffff",
"onRollOverBgColor":"0xcfcfcf",
"borderColor":"0xcfcfcf",
"onRollOverBorderColor":"0xffffff"
}
...
The set example sets for all scrolled items parameters of style from a file "./contents/sample_0.css", colour of a background by default - "0xffffff", colour of a background at prompting the cursor of the mouse on an item - "0xcfcfcf", colour of a border by default - "0xcfcfcf", colour of a border at prompting the cursor of the mouse on an item - "0xffffff".
items
The section items contains the list of scrolled items. Each element contains following parameters:- src - URL to a html-file of a contained item of scrolling
- src - URL to a html-file of a contained item of scrolling
- link - transition on URL at click by the
Parameters css, bgColor, onRollOverBgColor, borderColor, onRollOverBorderColor redefine values of corresponding parameters of section articleCommonCfg.
An example:...
"items":[
{
"src":"./contents/sample_0.html",
"bgColor":"0xffccff",
"onRollOverBgColor":"0xccffcc",
"borderColor":"0xff0000",
"onRollOverBorderColor":"0x0000ff"
},
{
"src":"./contents/sample_1.html",
"css":"./contents/sample_1.css",
"borderColor":"0xaaffaa",
"onRollOverBorderColor":"0xaaffff"
},
{
"src":"./contents/sample_2.html"
}
]
...
In the given example for the first item the parameters established in section itemsCommonCfg are redefined all, contents of an item are in a file "./contents/sample_0.html".
For the second item the parameter of a file of styles and parameters of a background is redefined, contents of an item are in a file "./contents/sample_1.html".
The third item - uses values of the parameters established in section itemsCommonCfg, contents of an item are in a file "./contents/sample_2.html".For all items value of parameter link is undefined.
Notes
At the instruction relative URL in html-files it is necessary to consider that the way ". / " specifies the catalogue in which web-page that contains scroller is placed (a html - file that has embed sprigst-slider.swf), instead of a item file itself.For more details see our demos.