pull phatfusion scripts that actually work with mootools 1.2
[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            : transitions between images\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: true,\r
23                         thumbnails: false,\r
24                         thumbnailCls: 'outline',\r
25                         backgroundSlider: false, //change to be an instance.\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                         this.imageObj.clone().replaces(img);\r
160                         //img.replaces(this.imageObj.clone());\r
161                 }else{\r
162                         var obj = this.imageObj.clone();\r
163                         obj.injectInside(this.newImage);\r
164                 }\r
165                 this.imageLoaded = this.image;\r
166                 this.loading.setStyle('display','none');\r
167                 if(this.options.thumbnails){\r
168                         \r
169                         if(this.options.backgroundSlider){\r
170                                 var elT = this.thumbnailImages[this.image];\r
171                                 this.bgSlider.move(elT);\r
172                                 this.bgSlider.setStart(elT);\r
173                         }else{\r
174                                 this.thumbnails.each(function(el,i){\r
175                                         el.removeClass(this.options.thumbnailCls);\r
176                                         if(i == this.image){\r
177                                                 el.addClass(this.options.thumbnailCls);\r
178                                         }\r
179                                 },this);\r
180                         }\r
181                 }\r
182                 this.effect();\r
183         },\r
184         \r
185         wait: function(){\r
186                 this.timer = this.load.delay(this.options.wait,this);\r
187         },\r
188         \r
189         play: function(num){\r
190                 if(this.stopped){\r
191                         if(num > -1){this.image = num-1};\r
192                         if(this.image < this.images.length){\r
193                                 this.stopped = false;\r
194                                 if(this.started){\r
195                                         this.next();\r
196                                 }else{\r
197                                         this.load();\r
198                                 }\r
199                                 this.started = true;\r
200                         }\r
201                 }\r
202         },\r
203         \r
204         stop: function(){\r
205                 $clear(this.timer);\r
206                 this.stopped = true;\r
207         },\r
208         \r
209         next: function(wait){\r
210                 var doNext = true;\r
211                 if(wait && this.stopped){\r
212                         doNext = false;\r
213                 }\r
214                 if(this.animating){\r
215                         doNext = false;\r
216                 }\r
217                 if(doNext){\r
218                         this.cloneImage();\r
219                         $clear(this.timer);\r
220                         /* console.log(this.image) */\r
221                         if(this.image < this.images.length-1){\r
222                                 if(wait){\r
223                                         this.wait();\r
224                                 }else{\r
225                                         this.load();    \r
226                                 }\r
227                         }else{\r
228                                 if(this.options.loop){\r
229                                         this.image = -1;\r
230                                         if(wait){\r
231                                                 this.wait();\r
232                                         }else{\r
233                                                 this.load();    \r
234                                         }\r
235                                 }else{\r
236                                         this.stopped = true;\r
237                                 }\r
238                         }\r
239                 }\r
240         },\r
241         \r
242         previous: function(){\r
243                 if(this.imageLoaded == 0){\r
244                         this.image = this.images.length-2;      \r
245                 }else{\r
246                         this.image = this.imageLoaded-2;\r
247                 }\r
248                 this.next();\r
249         },\r
250         \r
251         cloneImage: function(){\r
252                 var img = this.oldImage.getElement('img');\r
253                 if(img){\r
254                         this.imageObj.clone().replaces(img);\r
255                         //img.replaces(this.imageObj.clone());\r
256                 }else{\r
257                         var obj = this.imageObj.clone();\r
258                         obj.injectInside(this.oldImage);\r
259                 }\r
260                 \r
261                 this.oldImage.setStyles({\r
262                         zIndex: 0,\r
263                         top: 0,\r
264                         left: 0,\r
265                         opacity: 1\r
266                 });\r
267                 \r
268                 this.newImage.setStyles({opacity:0});\r
269         },\r
270         \r
271         \r
272         effect: function(){\r
273                 this.animating = true;\r
274                 this.effectObj = new Fx.Morph(this.newImage, {\r
275                         duration: this.options.duration,\r
276                         transition: this.options.transition\r
277                 });\r
278                 \r
279                 var myFxTypes = ['fade','wipe','slide'];\r
280                 var myFxDir = ['top','right','bottom','left'];\r
281                 \r
282                 if(this.options.effect == 'fade'){\r
283                         this.fade();\r
284                         \r
285                 }else if(this.options.effect == 'wipe'){\r
286                         if(this.options.direction == 'random'){\r
287                                 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
288                         }else{\r
289                                 this.setup(this.options.direction);\r
290                         }\r
291                         this.wipe();\r
292                         \r
293                 }else if(this.options.effect == 'slide'){\r
294                         if(this.options.direction == 'random'){\r
295                                 this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
296                         }else{\r
297                                 this.setup(this.options.direction);\r
298                         }\r
299                         this.slide();\r
300                         \r
301                 }else if(this.options.effect == 'random'){\r
302                         var type = myFxTypes[Math.floor(Math.random()*(2+1))];\r
303                         if(type != 'fade'){\r
304                                 var dir = myFxDir[Math.floor(Math.random()*(3+1))];\r
305                                 if(this.options.direction == 'random'){\r
306                                         this.setup(dir);\r
307                                 }else{\r
308                                         this.setup(this.options.direction);\r
309                                 }\r
310                         }else{\r
311                                 this.setup();\r
312                         }\r
313                         this[type]();\r
314                 }\r
315         },\r
316         \r
317         setup: function(dir){\r
318                 if(dir == 'top'){\r
319                         this.top = -this.container.getStyle('height').toInt();\r
320                         this.left = 0;\r
321                         this.topOut = this.container.getStyle('height').toInt();\r
322                         this.leftOut = 0;\r
323                         \r
324                 }else if(dir == 'right'){\r
325                         this.top = 0;\r
326                         this.left = this.container.getStyle('width').toInt();\r
327                         this.topOut = 0;\r
328                         this.leftOut = -this.container.getStyle('width').toInt();\r
329                         \r
330                 }else if(dir == 'bottom'){\r
331                         this.top = this.container.getStyle('height').toInt();\r
332                         this.left = 0;\r
333                         this.topOut = -this.container.getStyle('height').toInt();\r
334                         this.leftOut = 0;\r
335                         \r
336                 }else if(dir == 'left'){\r
337                         this.top = 0;\r
338                         this.left = -this.container.getStyle('width').toInt();\r
339                         this.topOut = 0;\r
340                         this.leftOut = this.container.getStyle('width').toInt();\r
341                         \r
342                 }else{\r
343                         this.top = 0;\r
344                         this.left = 0;\r
345                         this.topOut = 0;\r
346                         this.leftOut = 0;\r
347                 }\r
348         },\r
349         \r
350         fade: function(){\r
351                 this.effectObj.start({\r
352                         opacity: [0,1]\r
353                 });\r
354                 this.resetAnimation.delay(this.options.duration+90,this);\r
355                 if(!this.stopped){\r
356                 this.next.delay(this.options.duration+100,this,true);\r
357                 }\r
358         },\r
359         \r
360         wipe: function(){\r
361                 this.newImage.morph({\r
362                         duration: this.options.duration,\r
363                         transition: this.options.transition,\r
364                         top: [0,this.topOut],\r
365                         left: [0, this.leftOut]\r
366                 })\r
367                 this.effectObj.start({\r
368                         top: [this.top,0],\r
369                         left: [this.left,0],\r
370                         opacity: [1,1]\r
371                 },this);\r
372                 this.resetAnimation.delay(this.options.duration+90,this);\r
373                 if(!this.stopped){\r
374                 this.next.delay(this.options.duration+100,this,true);\r
375                 }\r
376         },\r
377         \r
378         slide: function(){\r
379                 this.effectObj.start({\r
380                         top: [this.top,0],\r
381                         left: [this.left,0],\r
382                         opacity: [1,1]\r
383                 },this);\r
384                 this.resetAnimation.delay(this.options.duration+90,this);\r
385                 if(!this.stopped){\r
386                 this.next.delay(this.options.duration+100,this,true);\r
387                 }\r
388         },\r
389         \r
390         resetAnimation: function(){\r
391                 this.animating = false;\r
392         }\r
393         \r
394 });\r
395 slideShow.implement(new Options);\r
396 slideShow.implement(new Events);\r
397 \r
398 \r
399 /*************************************************************/\r
400 \r