https://www.crosshouse-pri.s-lanark.sch.uk/index_htm_files/bx_cyclescircle_config.js

1var xaraSwidgets_cycleCircleTemplates = {
2
3
4    entry:      '<a href="{link}"><img class="{com_id}_image" src="{image1}"  border="none"  /></a>',
5    entry1:     '<a href="{link}"><span style="background:url({image}) 0px 0px no-repeat; border-radius: 50%;" class="{com_id}_image" ></span></a>',
6    
7   
8
9
10    main:   '<div id="{component_id}OuterDiv" class="cycleCircle" >'
11        +   '{entryhtml}'
12        +   '</div>'
13
14   
15};
16
17
18function xsw_cs_htmlbr(str) {
19    if (str == undefined)
20        return '';
21    var lines = str.split("\n");
22    for (var t = 0; t < lines.length; t++) {
23        lines[t] = $("<p>").text(lines[t]).html();
24    }
25    return lines.join("<br/>");
26}
27
28function xaraSwidgets_cycleCircleGetConfig(value, d)
29{
30    var ret = parseInt(value);
31
32    if(!isNaN(ret))
33    {
34        return ret;
35    }
36    else
37    {
38        return d;
39    }
40}
41
42
43// this is the constructor for a component
44// it loops through each 'entry' in the array of data and compiles the entry template for it
45// it then applies the resulting HTML to the main template before writing the whole lot to the div on the page
46// 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)
47function xaraSwidgets_cycleCircleConstructor(divID, data)
48{
49    var entryHTML = '';
50    var entryHTML1 = '';
51  
52
53    timeout = (data[0].pause);
54    speed = (data[0].speed);
55
56    var config = data[0];
57
58    var useTransition = xaraSwidgets_cycleCircleGetConfig(config.effect, 0);
59
60    var effects = [
61
62        
63        'fade',
64        'fadeZoom',
65        'shuffle',
66        'toss'
67       
68
69    ];
70
71    var effectName = effects[useTransition];
72
73    // loop through each entry in the array and compile the entry template for it
74    for(var i=1; i<data.length; i++)
75    {
76        data[i].desc = xsw_cs_htmlbr(data[i].desc);
77        entryHTML += xaraSwidgets_compileTemplate(xaraSwidgets_cycleCircleTemplates.entry, data[i]);
78        entryHTML1 += xaraSwidgets_compileTemplate(xaraSwidgets_cycleCircleTemplates.entry1, data[i]);
79       
80    }
81
82
83
84    var com1_id=divID;
85//  entryHTML = xsw_ea_htmlbr(entryHTML);
86    // now lets compile the 'main' template which acts as a wrapper for each entry
87
88    // get the timeout value
89    var enteredTimeout = parseFloat(timeout)*1000;
90    var defaultTimeout = '5000';
91    var timeout = isNaN(enteredTimeout) ? defaultTimeout : enteredTimeout;
92
93    // get the speed value
94    var enteredSpeed = parseFloat(speed)*1000;
95    var defaultSpeed = '700';
96    var speed = isNaN(enteredSpeed) ? defaultSpeed : enteredSpeed;
97
98
99    //set main data depending on whether were using the img or span
100   if(document.all && !document.addEventListener)  // better check for <=IE8
101
102     {
103
104        var mainData = {
105        component_id:divID,
106        entryhtml:entryHTML,
107        com_id:com1_id
108        };
109     }
110
111
112     else if (effectName === 'fadeZoom')
113     {
114        var mainData = {
115        component_id:divID,
116        entryhtml:entryHTML,
117        com_id:com1_id
118        }; 
119     }   
120    
121    else
122    {
123        var mainData = {
124        component_id:divID,
125        entryhtml:entryHTML1,
126        com_id:com1_id
127        }; 
128    }
129
130    
131
132//    console.log(mainData);
133   
134    var mainTemplate = xaraSwidgets_compileTemplate(xaraSwidgets_cycleCircleTemplates.main, mainData);
135
136
137    // now lets apply the resulting HTML for the whole component to the main DIV that was exported by XARA
138
139    $('#' + divID).html(mainTemplate);
140
141
142    // get the dimensions of the parent div
143
144    var width = $('#' + divID).parent('div').width();
145    var height = $('#' + divID).parent('div').height();
146    $('#' + divID).css('width',width);
147    $('#' + divID +'OuterDiv').css('z-index','0');
148    $('#' + divID).css('height',height);
149    $('.' + divID +'_image').css('width',width);
150    $('.' + divID +'_image').css('height',height);
151    $('#' + divID).parent('div').css('overflow', 'visible');
152
153
154  
155
156   
157
158
159
160    // invoke the effect
161
162   if(document.all && !document.addEventListener)  // better check for <=IE8
163
164     {
165
166        $('#' + divID + 'OuterDiv').cycle({
167
168        fx: effectName, // choose your transition type, ex: fade, scrollUp, shuffle, etc...
169        delay:timeout,
170        speed:  speed,
171        timeout: timeout,
172        cleartypeNoBg: true, // removes the white bg which shows in ie8
173        slideExpr: 'img'
174      
175        });  
176
177     }
178
179    else
180
181    {
182
183        //set the slideExpr value depending on if were using native code or not.
184        var effectExprVal = effectName !=="fadeZoom" ? 'span' : 'img';
185        //console.log(slideExprVal) 
186
187      
188
189        $('#' + divID + 'OuterDiv').cycle({
190
191        fx: effectName, // choose your transition type, ex: fade, scrollUp, shuffle, etc...
192        delay:timeout,
193        speed:  speed,
194        timeout: timeout,
195        cleartypeNoBg: true, // removes the white bg which shows in ie8
196        slideExpr: effectExprVal
197      
198        });  
199    }
200    
201   
202
203     
204
205      
206
207    // not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
208    $('#' + divID + 'OuterDiv').mouseenter(function(){
209        $('#' + divID + 'OuterDiv').cycle('pause');
210    }).mouseleave(function(){
211            $('#' + divID + 'OuterDiv').cycle('resume');
212        });
213
214
215   if (window._xw_preview==true)
216    {
217    
218       $('#' + divID + 'OuterDiv').cycle('pause'); 
219    }
220
221
222  
223
224
225
226
227}