https://bemoair.cz/index_htm_files/cycle_bottomradio_v8_config.js

1var xaraSwidgets_cycleBottomradio_v8Templates = {
2
3	entry:		'<a href="{link}">'
4			+	'<img src="{image}"  border="0"  />'
5			+	'</a>',
6			
7	bulletimage:'{bulletimage}',			
8			
9	main:	 '<div id="{component_id}OuterDiv" class="{component_id}cycle_bottomradio">'
10			+ 	'{entryhtml}'
11			+ '</div>'	
12			+ 	'<div class="{component_id}cycleBottomradio_navcontainer">'
13			+ 		'<div class="{component_id}cycleBottomradio_nav"></div>'
14			+ 	'</div>'
15			
16	
17			
18	        
19};
20
21// this is the constructor for a component
22// it loops through each 'entry' in the array of data and compiles the entry template for it
23// it then applies the resulting HTML to the main template before writing the whole lot to the div on the page
24// it then initialises the actual jquery plugin for the div (that now contains the required HTML as a result of writing the template to it)
25function xaraSwidgets_cycleBottomradio_v8Constructor(divID, data)
26{
27	
28	
29	var entryHTML = '';
30	// loop through each entry in the array and compile the entry template for it
31	for(var i=0; i<data.length; i++)
32	{
33		entryHTML += xaraSwidgets_compileTemplate(xaraSwidgets_cycleBottomradio_v8Templates.entry, data[i]);
34		bulletimage = (data[0].bulletimage);
35	}
36	
37	// now lets compile the 'main' template which acts as a wrapper for each entry
38	
39	var mainData = {
40		component_id:divID,
41		entryhtml:entryHTML
42	};
43	
44	var mainTemplate = xaraSwidgets_compileTemplate(xaraSwidgets_cycleBottomradio_v8Templates.main, mainData);
45	
46	// now lets apply the resulting HTML for the whole component to the main DIV that was exported by XARA
47	
48	$('#' + divID).html(mainTemplate);
49	
50	
51	
52	
53	// now we have the components DOM on the page - we can use the 'OuterDiv' as the jquery initiation point
54	
55	//	1. find the width and height of the parent div 
56	
57	// work out the required dimensions for width and height.
58	var cb_height = Math.floor ( $('#' + divID).parent('div').height()* 0.893);
59	var cb_width = $('#' + divID).parent('div').width()
60	
61	
62	//	2a.  write the css for the main container
63	$('head').append("<style>."+ divID +"cycle_bottomradio {background-color: #F8F8F8;  margin:0px;  z-index:0; width:" + cb_width +"px; height:" + cb_height +
64	"px;} ."+ divID +"cycleBottomradio_slideshow { overflow:hidden; margin:0px;  z-index:0;  position:relative;   margin:0; padding:0; left:0%; background:transparent; width:" + cb_width +"px; height:" + cb_height +
65	"px;} ."+ divID +"cycleBottomradio_slideshow img { padding: 0px; background-color: #F8F8F8; position: relative; margin:0; border:1px solid #CCC;  width:" + cb_width +
66	"px;} </style>");
67	
68	//	2b.  add the class to the images
69	$('#' + divID + 'OuterDiv').find('img').addClass(divID+"cycleBottomradio_slideshow");
70	
71	//	3.  write the css for navigation bullets
72	$('head').append("<style>."+ divID +"cycleBottomradio_navcontainer {display:block; list-style: none; left:0px;  position: relative; padding-left: 0px; margin: 0; clear: both; border: 0px solid #CCCCCC;   background: #; z-index:2; height:22px;  width:" + cb_width +
73	"px;} ."+ divID +"cycleBottomradio_nav a { display:block; background-image: url("+ bulletimage+"); float:left; height:22px; width: 22px; color:#555; background-position: 0 0px; background-repeat: no-repeat; text-decoration:none;text-indent: -9999px;" + 
74	"} ."+ divID +"cycleBottomradio_nav a:hover { color:#fff;height:22px;width: 22px; background-image: url("+ bulletimage+"); background-position: 0 -22px;	background-repeat: no-repeat; display: block;"  +
75	"}."+ divID +"cycleBottomradio_nav a.activeSlide{color:#fff; height:22px;width: 22px;background-image: url("+ bulletimage+");	background-position: 0 -22px;background-repeat: no-repeat; display: block;} </style>");
76
77	
78	$('#' + divID + 'OuterDiv').cycle({
79						
80						fx: 'all', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
81						
82						pager:      '.'+divID+'cycleBottomradio_nav'
83						
84							
85							
86	});
87}