WIP on migratin to phatfusion slideshow
[mkgallery.git] / include / slideshow.js
1 \r
2 /**************************************************************\r
3 \r
4         Script          : SlideShow\r
5         Version         : 1.3\r
6         Authors         : Samuel Birch\r
7         Desc            : \r
8         Licence         : Open Source MIT Licence\r
9 \r
10 **************************************************************/\r
11 \r
12 var SlideShow = new Class({\r
13         \r
14         getOptions: function(){\r
15                 return {\r
16                         effect: 'fade', //fade|wipe|slide|random\r
17                         duration: 2000,\r
18                         transition: Fx.Transitions.linear,\r
19                         direction: 'right', //top|right|bottom|left|random\r
20                         color: false,\r
21                         wait: 5000,\r
22                         loop: false,\r
23                         thumbnails: false,\r
24                         thumbnailCls: 'outline',\r
25                         backgroundSlider: false,\r
26                         loadingCls: 'loading',\r
27                         onClick: false\r
28                 };\r
29         },\r
30 \r
31         initialize: function(container, images, options){\r
32                 this.setOptions(this.getOptions(), options);\r
33                 \r
34                 this.container = $(container);\r
35                 this.container.setStyles({\r
36                         position: 'relative',\r
37                         overflow: 'hidden'\r
38                 });\r
39                 if(this.options.onClick){\r
40                         this.container.addEvent('click', function(){\r
41                                 this.options.onClick(this.imageLoaded);\r
42                         }.bind(this));\r
43                 }\r
44                 \r
45                 \r
46                 this.imagesHolder = new Element('div').setStyles({\r
47                         position: 'absolute',\r
48                         overflow: 'hidden',\r
49                         top: this.container.getStyle('height'),\r
50                         left: 0,\r
51                         width: '0px',\r
52                         height: '0px',\r
53                         display: 'none'\r
54                 }).injectInside(this.container);\r
55                 \r
56                 if($type(images) == 'string' && !this.options.thumbnails){\r
57                         var imageList = [];\r
58                         $$('.'+images).each(function(el){\r
59                                 imageList.push(el.src);\r
60                                 el.injectInside(this.imagesHolder);\r
61                         },this);\r
62                         this.images = imageList;\r
63                         \r
64                 }else if($type(images) == 'string' && this.options.thumbnails){\r
65                         var imageList = [];\r
66                         var srcList = [];\r
67                         this.thumbnails = $$('.'+images);\r
68                         this.thumbnails.each(function(el,i){\r
69                                 srcList.push(el.href);\r
70                                 imageList.push(el.getElement('img'));\r
71                                 el.href = 'javascript:;';\r
72                                 el.addEvent('click',function(){\r
73                                         this.stop();\r
74                                         this.play(i);                            \r
75                                 }.bind(this,el,i));\r
76                         },this);\r
77                         this.images = srcList;\r
78                         this.thumbnailImages = imageList;\r
79                         \r
80                         if(this.options.backgroundSlider){\r
81                                 this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});\r
82                                 this.bgSlider.set(this.thumbnailImages[0]);\r
83                         }\r
84                 \r
85                 }else{\r
86                         this.images = images;\r
87                 }\r
88                 \r
89                 this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({\r
90                         position: 'absolute',\r
91                         top: 0,\r
92                         left: 0,\r
93                         zIndex: 3,\r
94                         display: 'none',\r
95                         width: this.container.getStyle('width'),\r
96                         height: this.container.getStyle('height')\r
97                 }).injectInside(this.container);\r
98                 \r
99                 this.oldImage = new Element('div').setStyles({\r
100                         position: 'absolute',\r
101                         overflow: 'hidden',\r
102                         top: 0,\r
103                         left: 0,\r
104                         opacity: 0,\r
105                         width: this.container.getStyle('width'),\r
106                         height: this.container.getStyle('height')\r
107                 }).injectInside(this.container);\r
108                 \r
109                 this.newImage = this.oldImage.clone();\r
110                 this.newImage.injectInside(this.container);\r
111                 \r
112                 \r
113                 \r
114                 this.timer = 0;\r
115                 this.image = -1;\r
116                 this.imageLoaded = 0;\r
117                 this.stopped = true;\r
118                 this.started = false;\r
119                 this.animating = false;\r
120         },\r
121         \r
122         load: function(){\r
123                 $clear(this.timer);\r
124                 this.loading.setStyle('display','block');\r
125                 this.image++;\r
126                 var img = this.images[this.image];\r
127                 delete this.imageObj;\r
128                 \r
129                 doLoad = true;\r
130                 this.imagesHolder.getElements('img').each(function(el){\r
131                         var src = this.images[this.image];\r
132                         if(el.src == src){\r
133                                 this.imageObj = el;\r
134                                 doLoad = false;\r
135                                 this.add = false;\r
136                                 this.show();\r
137                         }\r
138                 },this);\r
139                 \r
140                 if(doLoad){\r
141                         this.add = true;\r
142                         this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});\r
143                 }\r
144                 \r
145         },\r
146 \r
147         show: function(add){\r
148                 \r
149                 if(this.add){\r
150                         this.imageObj.injectInside(this.imagesHolder);\r
151                 }\r
152                 \r
153                 this.newImage.setStyles({\r
154                         zIndex: 1,\r
155                         opacity: 0\r
156                 });\r
157                 var img = this.newImage.getElement('img');\r
158                 if(img){\r
159                         img.replaceWith(this.imageObj.clone());\r
160                 }else{\r
161                         var obj = this.imageObj.clone();\r
162                         obj.injectInside(this.newImage);\r
163                 }\r
164                 this.imageLoaded = this.image;\r
165                 this.loading.setStyle('display','none');\r
166                 if(this.options.thumbnails){\r
167                         \r
168                         if(this.options.backgroundSlider){\r
169                                 var elT = this.thumbnailImages[this.image];\r
170                                 this.bgSlider.move(elT);\r
171                                 this.bgSlider.setStart(elT);\r
172                         }else{\r
173                                 this.thumbnails.each(function(el,i){\r
174                                         el.removeClass(this.options.thumbnailCls);\r
175                                         if(i == this.image){\r
176                                                 el.addClass(this.options.thumbnailCls);\r
177                                         }\r
178                                 },this);\r
179                         }\r
180                 }\r
181                 this.effect();\r
182         },\r
183         \r
184         wait: function(){\r
185                 this.timer = this.load.delay(this.options.wait,this);\r
186         },\r
187         \r
188         play: function(num){\r
189                 if(this.stopped){\r
190                         if(num > -1){this.image = num-1};\r
191                         if(this.image < this.images.length){\r
192                                 this.stopped = false;\r
193                                 if(this.started){\r
194                                         this.next();\r
195                                 }else{\r
196                                         this.load();\r
197                                 }\r
198                                 this.started = true;\r
199                         }\r
200                 }\r
201         },\r
202         \r
203         stop: function(){\r
204                 $clear(this.timer);\r
205                 this.stopped = true;\r
206         },\r
207         \r
208         next: function(wait){\r
209                 var doNext = true;\r
210                 if(wait && this.stopped){\r
211                         doNext = false;\r
212                 }\r
213                 if(this.animating){\r
214                         doNext = false;\r
215                 }\r
216                 if(doNext){\r
217                         this.cloneImage();\r
218                         $clear(this.timer);\r
219                         if(this.image < this.images.length-1){\r
220                                 if(wait){\r
221                                         this.wait();\r
222                                 }else{\r
223                                         this.load();    \r
224                                 }\r
225                         }else{\r
226                                 if(this.options.loop){\r
227                                         this.image = -1;\r
228                                         if(wait){\r
229                                                 this.wait();\r
230                                         }else{\r
231                                                 this.load();    \r
232                                         }\r
233                                 }else{\r
234                                         this.stopped = true;\r
235                                 }\r
236                         }\r
237                 }\r
238         },\r
239         \r
240         previous: function(){\r
241                 if(this.imageLoaded == 0){\r
242                         this.image = this.images.length-2;      \r
243                 }else{\r
244                         this.image = this.imageLoaded-2;\r
245                 }\r
246                 this.next();\r
247         },\r
248         \r
249         cloneImage: function(){\r
250                 var img = this.oldImage.getElement('img');\r
251                 if(img){\r
252                         img.replaceWith(this.imageObj.clone());\r
253                 }else{\r
254                         var obj = this.imageObj.clone();\r
255                         obj.injectInside(this.oldImage);\r
256                 }\r
257                 \r
258                 this.oldImage.setStyles({\r
259                         zIndex: 0,\r
260                         top: 0,\r
261                         left: 0,\r
262                         opacity: 1\r
263                 });\r
264                 \r
265                 this.newImage.setStyles({opacity:0});\r
266         },\r
267         \r
268         \r
269         effect: function(){\r
270                 this.animating = true;\r
271                 this.effectObj = this.newImage.effects({\r
272                         duration: this.options.duration,\r
273                         transition: this.options.transition\r
274                 });\r
275                 \r
276                 var myFxTypes = ['fade','wipe','slide'];\r
277                 var myFxDir = ['top','right','bottom','left'];\r
278                 \r
279                 if(this.options.effect == 'fade'){\r
280                         this.fade();\r
281                         \r
282                 }else if(this.options.effect == 'wipe'){\r
283                         if(this.options.direction == 'random'){\r
284                                 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
285                         }else{\r
286                                 this.setup(this.options.direction);\r
287                         }\r
288                         this.wipe();\r
289                         \r
290                 }else if(this.options.effect == 'slide'){\r
291                         if(this.options.direction == 'random'){\r
292                                 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
293                         }else{\r
294                                 this.setup(this.options.direction);\r
295                         }\r
296                         this.slide();\r
297                         \r
298                 }else if(this.options.effect == 'random'){\r
299                         var type = myFxTypes[Math.floor(Math.random()*(2+1))];\r
300                         if(type != 'fade'){\r
301                                 var dir = myFxDir[Math.floor(Math.random()*(3+1))];\r
302                                 if(this.options.direction == 'random'){\r
303                                         this.setup(dir);\r
304                                 }else{\r
305                                         this.setup(this.options.direction);\r
306                                 }\r
307                         }else{\r
308                                 this.setup();\r
309                         }\r
310                         this[type]();\r
311                 }\r
312         },\r
313         \r
314         setup: function(dir){\r
315                 if(dir == 'top'){\r
316                         this.top = -this.container.getStyle('height').toInt();\r
317                         this.left = 0;\r
318                         this.topOut = this.container.getStyle('height').toInt();\r
319                         this.leftOut = 0;\r
320                         \r
321                 }else if(dir == 'right'){\r
322                         this.top = 0;\r
323                         this.left = this.container.getStyle('width').toInt();\r
324                         this.topOut = 0;\r
325                         this.leftOut = -this.container.getStyle('width').toInt();\r
326                         \r
327                 }else if(dir == 'bottom'){\r
328                         this.top = this.container.getStyle('height').toInt();\r
329                         this.left = 0;\r
330                         this.topOut = -this.container.getStyle('height').toInt();\r
331                         this.leftOut = 0;\r
332                         \r
333                 }else if(dir == 'left'){\r
334                         this.top = 0;\r
335                         this.left = -this.container.getStyle('width').toInt();\r
336                         this.topOut = 0;\r
337                         this.leftOut = this.container.getStyle('width').toInt();\r
338                         \r
339                 }else{\r
340                         this.top = 0;\r
341                         this.left = 0;\r
342                         this.topOut = 0;\r
343                         this.leftOut = 0;\r
344                 }\r
345         },\r
346         \r
347         fade: function(){\r
348                 this.effectObj.start({\r
349                         opacity: [0,1]\r
350                 });\r
351                 this.resetAnimation.delay(this.options.duration+90,this);\r
352                 if(!this.stopped){\r
353                 this.next.delay(this.options.duration+100,this,true);\r
354                 }\r
355         },\r
356         \r
357         wipe: function(){\r
358                 this.oldImage.effects({\r
359                         duration: this.options.duration,\r
360                         transition: this.options.transition\r
361                 }).start({\r
362                         top: [0,this.topOut],\r
363                         left: [0, this.leftOut]\r
364                 })\r
365                 this.effectObj.start({\r
366                         top: [this.top,0],\r
367                         left: [this.left,0],\r
368                         opacity: [1,1]\r
369                 },this);\r
370                 this.resetAnimation.delay(this.options.duration+90,this);\r
371                 if(!this.stopped){\r
372                 this.next.delay(this.options.duration+100,this,true);\r
373                 }\r
374         },\r
375         \r
376         slide: function(){\r
377                 this.effectObj.start({\r
378                         top: [this.top,0],\r
379                         left: [this.left,0],\r
380                         opacity: [1,1]\r
381                 },this);\r
382                 this.resetAnimation.delay(this.options.duration+90,this);\r
383                 if(!this.stopped){\r
384                 this.next.delay(this.options.duration+100,this,true);\r
385                 }\r
386         },\r
387         \r
388         resetAnimation: function(){\r
389                 this.animating = false;\r
390         }\r
391         \r
392 });\r
393 SlideShow.implement(new Options);\r
394 SlideShow.implement(new Events);\r
395 \r
396 \r
397 /*************************************************************/\r
398 \r