CodeThat.com

CodeThatScroller - Style, mode, position







"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"
}
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"
	} ]
};