"mode":"slide",
"style": 
{
	"width": 300,
	"height": 180,
        "bgcolor" : "#B6C4D1"
},
"position": 
{ 
	"x":10, 
	"y":10, 
	"absolute" : "true" 
}

 

 

 

 

 

 

 

 

 

 

"mode":"slide",
"style": 
{
	"width": 250,
	"height": 200,
	"bgimg" : "img/bg2.gif"
},
"position": 
{ 
	"x":10, 
	"y":10, 
	"absolute" : "true" 
}

Quick Links 
Download CodeThatScroller STD
Order CodeThatScroller PRO

var DemoDef = {
	"mode":"scroll",
	"style": {
		"width": 300,
		"height": 170,
		"view": { 
				"width": 250, "height":100, 
				"offset": { "x":25, "y":25 
			} 
		},
		"bgcolor" : "#B6C4D1"
	},
	"position": { "x":0, "y":10, "absolute" : false },
	"scroll": {
		"type":"control",
		"step":5,
		"timer":40,
		"dir":"s",
		"pause":1500,
		"cycle":true,
		"ctrlstyle": { 
				"width":60, 
				"height":25, 
				"align":"center" 
			     },
		"ctrlpos": { "x":30, "y":135 },
		"control": [
			{ "type":"link", 
			  "act":"prev", 
			  "text":"[ Prev ]" 
			},
			{ "type":"link", 
			  "act":"next", 
			  "text":"[ Next ]" 
			},
			{ "type":"link", 
			  "act":"rew", 
			  "text":"[ Rew  ]" 
			}
		]
	},
	"itemeffect":"revealTrans(duration=1, transition=12)",
	"itemstyle":{ "bgcolor": "white" },
	"items": [
		{
			"type":"HTML",
			"src":"<p>You can set a separate link for each image in 
                               the slideshow.<p>Users trigger the link by clicking 
                               the image or by clicking a separate link or button. 
                               <p>You can open a new window for each link, and even 
                               set the window attributes." ,
			"style": {
				"bgcolor":"#EEEEEE",
				"color":"#696969"
			}
		},
		{
			"type":"HTML",
			"src":"<p>You can set a separate link for each 
                               image in the slideshow!!!",
			"style": {
				"bgcolor":"#EEEEEE",
				"color":"#696969"
			}
		},
		{
			"type":"IMG",
			"src":"img/1605anim1a.jpg"
		}
	]
};

var DemoDef1 = {
	"mode":"slide",
	"style": {
		"width": 250,
		"height": 200,
		"view": { 
				"width": 200, 
				"height":100, 
				"offset": { "x":25, "y":25 } 
			},
		"bgimg" : "img/bg2.gif"
	},
	"position": { "x":10, "y":10, "absolute" : false },
	"scroll": {
		"type":"control",
		"step":5,
		"timer":40,
		"dir":"s",
		"pause":1500,
		"cycle":true,
		"ctrlstyle": {  "width":60, 
				"height":25, 
				"align":"center" 
			     },
		"ctrlpos": { "x":30, "y":175 },
		"control": [
			{ "type":"link", 
			  "act":"prev", 
			  "text":"[ Prev ]" 
			},
			{ "type":"link", 
			  "act":"next", 
			  "text":"[ Next ]" 
			},
			{ "type":"link", 
			  "act":"rew", 
			  "text":"[ Rew  ]" 
			}
		]
	},
	"itemeffect":"revealTrans(duration=1, transition=12)",
	"itemstyle":{ "bgcolor": "white" },
	"items": [
		{
			"type":"HTML",
			"src":"<p>You can set a separate link for each 
				image in the slideshow.<p>Users trigger 
				the link by clicking the image or by clicking 
				a separate link or button. <p>You can open a new 
				window for each link, and even set the window 
  				attributes." ,
			"style": {
				"bgcolor":"#EEEEEE",
				"color":"#696969"
			}
		},
		{
			"type":"HTML",
			"src":"<p>You can set a separate link for each image 
				in the slideshow!!!",
			"style": {
				"bgcolor":"#EEEEEE",
				"color":"#696969"
			}
		},
		{
			"type":"IMG",
			"src":"img/1605anim1a.jpg"
		}
	]
};