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