1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
|
/* ContentFlowAddOn_DEFAULT, version 1.0.2
* (c) 2008 - 2010 Sebastian Kutsch
* <http://www.jacksasylum.eu/ContentFlow/>
*
* This file is distributed under the terms of the MIT license.
* (see http://www.jacksasylum.eu/ContentFlow/LICENSE)
*/
/*
* This is an example file of an AddOn file and will not be used by ContentFlow.
* All values are the default values of ContentFlow.
*
* To create a new AddOn follow this guideline:
* (replace ADDONNAME by the name of your AddOn)
*
* 1. rename this file to ContentFlowAddOn_ADDONNAME.js
* 2. Change the string 'DEFAULT' in the 'new ContentFlowAddOn' line to 'ADDONNAME'
* 3. Make the changes you like/need
* 4. Remove all settings you do not need (or comment out for testing).
* 5. Add 'ADDONNAME' to the load attribute of the ContentFlow script tag in your web page
* 6. Reload your page :-)
*
*/
new ContentFlowAddOn ('DEFAULT', {
/*
* AddOn configuration object, defining the default configuration values.
*/
conf: {},
/*
* This function will be executed on creation of this object (on load of this file).
* It's mostly intended to automatically add additional stylesheets and javascripts.
*
* Object helper methods and parameters:
* scriptpath: basepath of this AddOn (without the filename)
* addScript(path): adds a javascript-script tag to the head with the src set to 'path'
* i.e. this.addScript(scriptpath+"MyScript.js") .
*
* addStylesheet(path): adds a css-stylesheet-link tag to the head with href set to
* 'path' i.e. this.addStylesheet(scriptpath+"MyStylesheet.css") .
* If path is omittet it defaults to :
* scriptpath+'ContentFlowAddOn_ADDONNAME.css'.
*
*/
init: function() {
// this.addScript();
// this.addStylesheet();
},
/*
* This method will be executed for each ContentFlow on the page after the
* HTML document is loaded (when the whole DOM exists). You can use it to
* add elements automatically to the flow.
*
* flow: the DOM object of the ContentFlow
* flow.Flow: the DOM object of the 'flow' element
* flow.Scrollbar: the DOM object of the 'scrollbar' element
* flow.Slider: the DOM object of the 'slider' element
* flow.globalCaption: the DOM object of the 'globalCaption' element
*
* You can access also all public methods of the flow by 'flow.METHOD' (see documentation).
*/
onloadInit: function (flow) {
},
/*
* This method will be executed _after_ the initialization of each ContentFlow.
*/
afterContentFlowInit: function (flow) {
},
/*
* ContentFlow configuration.
* Will overwrite the default configuration (or configuration of previously loaded AddOns).
* For a detailed explanation of each value take a look at the documentation.
*/
ContentFlowConf: {
loadingTimeout: 30000, // milliseconds
activeElement: 'content', // item or content
maxItemHeight: 0, // 0 == auto, >0 max item height in px
scaleFactor: 1.0, // overall scale factor of content
scaleFactorLandscape: 1.33, // scale factor of landscape images ('max' := height= maxItemHeight)
scaleFactorPortrait: 1.0, // scale factor of portraoit and square images ('max' := width = item width)
fixItemSize: false, // don't scale item size to fit image, crop image if bigger than item
relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate
circularFlow: true, // should the flow wrap around at begging and end?
verticalFlow: false, // turn ContentFlow 90 degree counterclockwise
visibleItems: -1, // how man item are visible on each side (-1 := auto)
endOpacity: 1, // opacity of last visible item on both sides
startItem: "center", // which item should be shown on startup?
scrollInFrom: "pre", // from where should be scrolled in?
flowSpeedFactor: 1.0, // how fast should it scroll?
flowDragFriction: 1.0, // how hard should it be be drag the floe (0 := no dragging)
scrollWheelSpeed: 1.0, // how fast should the mouse wheel scroll. nagive values will revers the scroll direction (0:= deactivate mouse wheel)
keys: { // key => function definition, if set to {} keys ar deactivated
13: function () { this.conf.onclickActiveItem(this._activeItem) },
37: function () { this.moveTo('pre') },
38: function () { this.moveTo('visibleNext') },
39: function () { this.moveTo('next') },
40: function () { this.moveTo('visiblePre') }
},
reflectionColor: "transparent", // none, transparent, overlay or hex RGB CSS style #RRGGBB
reflectionHeight: 0.5, // float (relative to original image height)
reflectionGap: 0.0, // gap between the image and the reflection
/*
* ==================== helper and calculation methods ====================
*
* This section contains all user definable methods. With thees you can
* change the behavior and the visual effects of the flow.
* For an explanation of each method take a look at the documentation.
*
* BEWARE: All methods are bond to the ContentFlow!!!
* This means that the keyword 'this' refers to the ContentFlow
* which called the method.
*/
/* ==================== actions ==================== */
/*
* called after the inactive item is clicked.
*/
onclickInactiveItem : function (item) {},
/*
* called after the active item is clicked.
*/
onclickActiveItem: function (item) {
var url, target;
if (url = item.content.getAttribute('href')) {
target = item.content.getAttribute('target');
}
else if (url = item.element.getAttribute('href')) {
target = item.element.getAttribute('target');
}
else if (url = item.content.getAttribute('src')) {
target = item.content.getAttribute('target');
}
if (url) {
if (target)
window.open(url, target).focus();
else
window.location.href = url;
}
},
/*
* called when an item becomes inactive.
*/
onMakeInactive: function (item) {},
/*
* called when an item becomes active.
*/
onMakeActive: function (item) {},
/*
* called when the target item/position is reached
*/
onReachTarget: function(item) {},
/*
* called when a new target is set
*/
onMoveTo: function(item) {},
/*
* called each item an item is drawn (after scaling and positioning)
*/
onDrawItem: function(item) {},
/*
* called if the pre-button is clicked.
*/
onclickPreButton: function (event) {
this.moveToIndex('pre');
Event.stop(event);
},
/*
* called if the next-button is clicked.
*/
onclickNextButton: function (event) {
this.moveToIndex('next');
Event.stop(event);
},
/* ==================== calculations ==================== */
/*
* calculates the width of the step.
*/
calcStepWidth: function(diff) {
var vI = this.conf.visibleItems;
var items = this.items.length;
items = items == 0 ? 1 : items;
if (Math.abs(diff) > vI) {
if (diff > 0) {
var stepwidth = diff - vI;
} else {
var stepwidth = diff + vI;
}
} else if (vI >= this.items.length) {
var stepwidth = diff / items;
} else {
var stepwidth = diff * ( vI / items);
}
return stepwidth;
},
/*
* calculates the size of the item at its relative position x
*
* relativePosition: Math.round(Position(activeItem)) - Position(item)
* side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0
* returns a size object
*/
calcSize: function (item) {
var rP = item.relativePosition;
var h = 1/(Math.abs(rP)+1);
var w = h;
return {width: w, height: h};
},
/*
* calculates the position of an item within the flow depending on it's relative position
*
* relativePosition: Math.round(Position(activeItem)) - Position(item)
* side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0
*/
calcCoordinates: function (item) {
var rP = item.relativePosition;
//var rPN = item.relativePositionNormed;
var vI = this.conf.visibleItems;
var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
var x = item.side * vI/(vI+1)* f;
var y = 1;
return {x: x, y: y};
},
/*
* calculates the position of an item relative to it's calculated coordinates
* x,y = 0 ==> center of item has the position calculated by
* calculateCoordinates
*
* relativePosition: Math.round(Position(activeItem)) - Position(item)
* side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0
* size: size object calculated by calcSize
*/
calcRelativeItemPosition: function (item) {
var x = 0;
var y = -1;
return {x: x, y: y};
},
/*
* calculates and returns the relative z-index of an item
*/
calcZIndex: function (item) {
return -Math.abs(item.relativePositionNormed);
},
/*
* calculates and returns the relative font-size of an item
*/
calcFontSize: function (item) {
return item.size;
},
/*
* calculates and returns the opacity of an item
*/
calcOpacity: function (item) {
return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity);
}
}
});
|
