--- /dev/null
+\r
+/**************************************************************\r
+\r
+ Script : SlideShow\r
+ Version : 1.3\r
+ Authors : Samuel Birch\r
+ Desc : \r
+ Licence : Open Source MIT Licence\r
+\r
+**************************************************************/\r
+\r
+var SlideShow = new Class({\r
+ \r
+ getOptions: function(){\r
+ return {\r
+ effect: 'fade', //fade|wipe|slide|random\r
+ duration: 2000,\r
+ transition: Fx.Transitions.linear,\r
+ direction: 'right', //top|right|bottom|left|random\r
+ color: false,\r
+ wait: 5000,\r
+ loop: false,\r
+ thumbnails: false,\r
+ thumbnailCls: 'outline',\r
+ backgroundSlider: false,\r
+ loadingCls: 'loading',\r
+ onClick: false\r
+ };\r
+ },\r
+\r
+ initialize: function(container, images, options){\r
+ this.setOptions(this.getOptions(), options);\r
+ \r
+ this.container = $(container);\r
+ this.container.setStyles({\r
+ position: 'relative',\r
+ overflow: 'hidden'\r
+ });\r
+ if(this.options.onClick){\r
+ this.container.addEvent('click', function(){\r
+ this.options.onClick(this.imageLoaded);\r
+ }.bind(this));\r
+ }\r
+ \r
+ \r
+ this.imagesHolder = new Element('div').setStyles({\r
+ position: 'absolute',\r
+ overflow: 'hidden',\r
+ top: this.container.getStyle('height'),\r
+ left: 0,\r
+ width: '0px',\r
+ height: '0px',\r
+ display: 'none'\r
+ }).injectInside(this.container);\r
+ \r
+ if($type(images) == 'string' && !this.options.thumbnails){\r
+ var imageList = [];\r
+ $$('.'+images).each(function(el){\r
+ imageList.push(el.src);\r
+ el.injectInside(this.imagesHolder);\r
+ },this);\r
+ this.images = imageList;\r
+ \r
+ }else if($type(images) == 'string' && this.options.thumbnails){\r
+ var imageList = [];\r
+ var srcList = [];\r
+ this.thumbnails = $$('.'+images);\r
+ this.thumbnails.each(function(el,i){\r
+ srcList.push(el.href);\r
+ imageList.push(el.getElement('img'));\r
+ el.href = 'javascript:;';\r
+ el.addEvent('click',function(){\r
+ this.stop();\r
+ this.play(i); \r
+ }.bind(this,el,i));\r
+ },this);\r
+ this.images = srcList;\r
+ this.thumbnailImages = imageList;\r
+ \r
+ if(this.options.backgroundSlider){\r
+ 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
+ this.bgSlider.set(this.thumbnailImages[0]);\r
+ }\r
+ \r
+ }else{\r
+ this.images = images;\r
+ }\r
+ \r
+ this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({\r
+ position: 'absolute',\r
+ top: 0,\r
+ left: 0,\r
+ zIndex: 3,\r
+ display: 'none',\r
+ width: this.container.getStyle('width'),\r
+ height: this.container.getStyle('height')\r
+ }).injectInside(this.container);\r
+ \r
+ this.oldImage = new Element('div').setStyles({\r
+ position: 'absolute',\r
+ overflow: 'hidden',\r
+ top: 0,\r
+ left: 0,\r
+ opacity: 0,\r
+ width: this.container.getStyle('width'),\r
+ height: this.container.getStyle('height')\r
+ }).injectInside(this.container);\r
+ \r
+ this.newImage = this.oldImage.clone();\r
+ this.newImage.injectInside(this.container);\r
+ \r
+ \r
+ \r
+ this.timer = 0;\r
+ this.image = -1;\r
+ this.imageLoaded = 0;\r
+ this.stopped = true;\r
+ this.started = false;\r
+ this.animating = false;\r
+ },\r
+ \r
+ load: function(){\r
+ $clear(this.timer);\r
+ this.loading.setStyle('display','block');\r
+ this.image++;\r
+ var img = this.images[this.image];\r
+ delete this.imageObj;\r
+ \r
+ doLoad = true;\r
+ this.imagesHolder.getElements('img').each(function(el){\r
+ var src = this.images[this.image];\r
+ if(el.src == src){\r
+ this.imageObj = el;\r
+ doLoad = false;\r
+ this.add = false;\r
+ this.show();\r
+ }\r
+ },this);\r
+ \r
+ if(doLoad){\r
+ this.add = true;\r
+ this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});\r
+ }\r
+ \r
+ },\r
+\r
+ show: function(add){\r
+ \r
+ if(this.add){\r
+ this.imageObj.injectInside(this.imagesHolder);\r
+ }\r
+ \r
+ this.newImage.setStyles({\r
+ zIndex: 1,\r
+ opacity: 0\r
+ });\r
+ var img = this.newImage.getElement('img');\r
+ if(img){\r
+ img.replaceWith(this.imageObj.clone());\r
+ }else{\r
+ var obj = this.imageObj.clone();\r
+ obj.injectInside(this.newImage);\r
+ }\r
+ this.imageLoaded = this.image;\r
+ this.loading.setStyle('display','none');\r
+ if(this.options.thumbnails){\r
+ \r
+ if(this.options.backgroundSlider){\r
+ var elT = this.thumbnailImages[this.image];\r
+ this.bgSlider.move(elT);\r
+ this.bgSlider.setStart(elT);\r
+ }else{\r
+ this.thumbnails.each(function(el,i){\r
+ el.removeClass(this.options.thumbnailCls);\r
+ if(i == this.image){\r
+ el.addClass(this.options.thumbnailCls);\r
+ }\r
+ },this);\r
+ }\r
+ }\r
+ this.effect();\r
+ },\r
+ \r
+ wait: function(){\r
+ this.timer = this.load.delay(this.options.wait,this);\r
+ },\r
+ \r
+ play: function(num){\r
+ if(this.stopped){\r
+ if(num > -1){this.image = num-1};\r
+ if(this.image < this.images.length){\r
+ this.stopped = false;\r
+ if(this.started){\r
+ this.next();\r
+ }else{\r
+ this.load();\r
+ }\r
+ this.started = true;\r
+ }\r
+ }\r
+ },\r
+ \r
+ stop: function(){\r
+ $clear(this.timer);\r
+ this.stopped = true;\r
+ },\r
+ \r
+ next: function(wait){\r
+ var doNext = true;\r
+ if(wait && this.stopped){\r
+ doNext = false;\r
+ }\r
+ if(this.animating){\r
+ doNext = false;\r
+ }\r
+ if(doNext){\r
+ this.cloneImage();\r
+ $clear(this.timer);\r
+ if(this.image < this.images.length-1){\r
+ if(wait){\r
+ this.wait();\r
+ }else{\r
+ this.load(); \r
+ }\r
+ }else{\r
+ if(this.options.loop){\r
+ this.image = -1;\r
+ if(wait){\r
+ this.wait();\r
+ }else{\r
+ this.load(); \r
+ }\r
+ }else{\r
+ this.stopped = true;\r
+ }\r
+ }\r
+ }\r
+ },\r
+ \r
+ previous: function(){\r
+ if(this.imageLoaded == 0){\r
+ this.image = this.images.length-2; \r
+ }else{\r
+ this.image = this.imageLoaded-2;\r
+ }\r
+ this.next();\r
+ },\r
+ \r
+ cloneImage: function(){\r
+ var img = this.oldImage.getElement('img');\r
+ if(img){\r
+ img.replaceWith(this.imageObj.clone());\r
+ }else{\r
+ var obj = this.imageObj.clone();\r
+ obj.injectInside(this.oldImage);\r
+ }\r
+ \r
+ this.oldImage.setStyles({\r
+ zIndex: 0,\r
+ top: 0,\r
+ left: 0,\r
+ opacity: 1\r
+ });\r
+ \r
+ this.newImage.setStyles({opacity:0});\r
+ },\r
+ \r
+ \r
+ effect: function(){\r
+ this.animating = true;\r
+ this.effectObj = this.newImage.effects({\r
+ duration: this.options.duration,\r
+ transition: this.options.transition\r
+ });\r
+ \r
+ var myFxTypes = ['fade','wipe','slide'];\r
+ var myFxDir = ['top','right','bottom','left'];\r
+ \r
+ if(this.options.effect == 'fade'){\r
+ this.fade();\r
+ \r
+ }else if(this.options.effect == 'wipe'){\r
+ if(this.options.direction == 'random'){\r
+ this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
+ }else{\r
+ this.setup(this.options.direction);\r
+ }\r
+ this.wipe();\r
+ \r
+ }else if(this.options.effect == 'slide'){\r
+ if(this.options.direction == 'random'){\r
+ this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
+ }else{\r
+ this.setup(this.options.direction);\r
+ }\r
+ this.slide();\r
+ \r
+ }else if(this.options.effect == 'random'){\r
+ var type = myFxTypes[Math.floor(Math.random()*(2+1))];\r
+ if(type != 'fade'){\r
+ var dir = myFxDir[Math.floor(Math.random()*(3+1))];\r
+ if(this.options.direction == 'random'){\r
+ this.setup(dir);\r
+ }else{\r
+ this.setup(this.options.direction);\r
+ }\r
+ }else{\r
+ this.setup();\r
+ }\r
+ this[type]();\r
+ }\r
+ },\r
+ \r
+ setup: function(dir){\r
+ if(dir == 'top'){\r
+ this.top = -this.container.getStyle('height').toInt();\r
+ this.left = 0;\r
+ this.topOut = this.container.getStyle('height').toInt();\r
+ this.leftOut = 0;\r
+ \r
+ }else if(dir == 'right'){\r
+ this.top = 0;\r
+ this.left = this.container.getStyle('width').toInt();\r
+ this.topOut = 0;\r
+ this.leftOut = -this.container.getStyle('width').toInt();\r
+ \r
+ }else if(dir == 'bottom'){\r
+ this.top = this.container.getStyle('height').toInt();\r
+ this.left = 0;\r
+ this.topOut = -this.container.getStyle('height').toInt();\r
+ this.leftOut = 0;\r
+ \r
+ }else if(dir == 'left'){\r
+ this.top = 0;\r
+ this.left = -this.container.getStyle('width').toInt();\r
+ this.topOut = 0;\r
+ this.leftOut = this.container.getStyle('width').toInt();\r
+ \r
+ }else{\r
+ this.top = 0;\r
+ this.left = 0;\r
+ this.topOut = 0;\r
+ this.leftOut = 0;\r
+ }\r
+ },\r
+ \r
+ fade: function(){\r
+ this.effectObj.start({\r
+ opacity: [0,1]\r
+ });\r
+ this.resetAnimation.delay(this.options.duration+90,this);\r
+ if(!this.stopped){\r
+ this.next.delay(this.options.duration+100,this,true);\r
+ }\r
+ },\r
+ \r
+ wipe: function(){\r
+ this.oldImage.effects({\r
+ duration: this.options.duration,\r
+ transition: this.options.transition\r
+ }).start({\r
+ top: [0,this.topOut],\r
+ left: [0, this.leftOut]\r
+ })\r
+ this.effectObj.start({\r
+ top: [this.top,0],\r
+ left: [this.left,0],\r
+ opacity: [1,1]\r
+ },this);\r
+ this.resetAnimation.delay(this.options.duration+90,this);\r
+ if(!this.stopped){\r
+ this.next.delay(this.options.duration+100,this,true);\r
+ }\r
+ },\r
+ \r
+ slide: function(){\r
+ this.effectObj.start({\r
+ top: [this.top,0],\r
+ left: [this.left,0],\r
+ opacity: [1,1]\r
+ },this);\r
+ this.resetAnimation.delay(this.options.duration+90,this);\r
+ if(!this.stopped){\r
+ this.next.delay(this.options.duration+100,this,true);\r
+ }\r
+ },\r
+ \r
+ resetAnimation: function(){\r
+ this.animating = false;\r
+ }\r
+ \r
+});\r
+SlideShow.implement(new Options);\r
+SlideShow.implement(new Events);\r
+\r
+\r
+/*************************************************************/\r
+\r
projects / mkgallery.git / blobdiff