CodeThatScroller Configuration

You can control scroller behaviour by using toolbar. You should use "scroll" property to describe this toolbar view and actions.

To specify this property use construction like this:

"scroll" :
{
	"type" : "auto",
	"step" : 5,
	"timer" : 30,
	"dir" : "e",
	"pause" : 1500,
	"cycle" : true,
	"ctrlstyle" : {
		"width" : 70, "height" : 30, "align" : "center"
	},
	"ctrlpos" : {
		"x" : 10, "y" : 180
	},
	"control" :
	[
	{
		"type" : "button", "act" : "stop", "text" : "[ Stop  ]"
	},
	{
		"type" : "button", "act" : "pause", "text" : "[Pause]"
	},
	{
		"type" : "button", "act" : "start", "text" : "[ Start ]"
	},
	{
		"type" : "button", "act" : "rew", "text" : "[ Rew ]"
	} ]
}

"type" - Scrolling type. If value is "auto" all scroller objects are appeared as though you see a slide show. If value is "control" you should press button to see the next picture.

Default value is "auto".

For any other value it's possible to step back and forward from item to item. Of course, it's possible to control the scrolling in both of those modes, but available operations are slightly different.

"step" - Step to go by step-by-step, in pixels.

"timer" - Timeout between scrolling steps, in milliseconds.

"dir" - Describes the scrolling direction. It can go in one of four directions: n = north (up), s = south (down), e = east (to the right), w = west (to the left).

"pause" - Pause between items are scrolled from one to another, in milliseconds.

"cycle" - Specifies whether to cycle the scrolling/slideshow when the last item is reached.

"ctrlstyle" - Describes the style settings common for all scrolling controls.

See Scroller Style to learn more about scroller style.

"ctrlpos" - Start offset for positioning controls that don't have exact position specified. JS syntax:

ctrlpos : { x : 0, y : 0 }

"ctrldir" - Describes how controls are distributed if no coordinates are specified for them. Possible values are: h = horizontally (to the right), v = vertically (down).

"control" - Array of scrolling controls:

"type" - Describes the type of a scroll control.

Scroll controls are buttons or links {'button'|'link'} that are used to control the scrolling. If type is "button", a usual button is displayed, otherwise a hyperlink that can contain any HTML is drawn.

"pos" - Offset within a widget relatively to the top-left corner.

"act" - Describes the action is executed when the scroll control is clicked.

Possible values - {'next'|'prev'|'stop'|'start'|'pause'|'rew'}

Meanings:

next - go the next item,

prev - go to the previous item,

stop - stop autoscrolling,

start - start autoscrolling,

pause - pause scrolling (auto or manual),

rew - replay from the first item.

Start/Stop actions are possible only when scrolling type is set to "auto". Next/Prev are possible for manual scrolling only.

"style" - Describes the style of a layer that contains the scroll control.

See Scroller Style to learn more about scroller style.

"text" - Caption (for button or link), or HTML code do display within a control (link only).

Example - scroller configuration.

You can see an example and complete code here - Scroller configuration. [popup]

Read more about CodeThatScroller >>