+++ /dev/null
-\r
-/**************************************************************\r
-\r
- Script : slideShow\r
- Version : 1.3\r
- Authors : Samuel Birch\r
- Desc : transitions between images\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: true,\r
- thumbnails: false,\r
- thumbnailCls: 'outline',\r
- backgroundSlider: false, //change to be an instance.\r
- loadingCls: 'loading',\r
- onClick: false,\r
- comment: null,\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
- this.comm=this.options.comment;\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
- /*\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
- */\r
- this.images = images;\r
- /*\r
- }\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
- window.addEvent('resize', this.reshow.bind(this));\r
- window.addEvent('scroll', this.reshow.bind(this));\r
- },\r
- \r
- load: function(){\r
- $clear(this.timer);\r
- this.loading.setStyle('display','block');\r
- this.image++;\r
- var i;\r
- var width;\r
- var height;\r
- var img;\r
- for (i=0;i<this.images[this.image].length;i++) {\r
- width = this.images[this.image][i][0];\r
- height = this.images[this.image][i][1];\r
- img = this.images[this.image][i][2];\r
- if (width >= this.width || height >= this.height) {\r
- break;\r
- }\r
- }\r
- /* alert('req1 image '+img); */\r
- delete this.imageObj;\r
- \r
- doLoad = true;\r
- this.imagesHolder.getElements('img').each(function(el){\r
- var src = this.images[this.image][i][2];\r
- /* alert('req2 image '+src); */\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
- this.imageObj.set('width', width).set('height', height);\r
- }\r
- this.imageObj.set('id', this.images[this.image][i][3]);\r
- this.imageObj.set('title', this.images[this.image][i][4]);\r
- },\r
-\r
- restyle: function(imgobj){\r
- var width = imgobj.get('width');\r
- var height = imgobj.get('height');\r
- var vfactor = this.width/width;\r
- var hfactor = this.height/height;\r
- var factor = 1;\r
- if (vfactor < factor) { factor = vfactor; }\r
- if (hfactor < factor) { factor = hfactor; }\r
- factor *= .95;\r
- if (factor < 1) {\r
- height = Math.round(height * factor);\r
- width = Math.round(width * factor);\r
- }\r
- var topoff = (this.height - height)/2;\r
- var leftoff = (this.width - width)/2;\r
- /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */\r
- imgobj.setStyles({\r
- position: 'absolute',\r
- top: topoff,\r
- left: leftoff,\r
- width: width,\r
- height: height,\r
- });\r
- },\r
-\r
- show: function(add){\r
- \r
- this.restyle(this.imageObj);\r
- var oimg = this.oldImage.getElement('img');\r
- if (oimg) {\r
- this.restyle(oimg);\r
- }\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
- this.imageObj.clone().replaces(img);\r
- //img.replaces(this.imageObj.clone());\r
- }else{\r
- var obj = this.imageObj.clone();\r
- obj.injectInside(this.newImage);\r
- }\r
-\r
- this.imageLoaded = this.image;\r
- this.loading.setStyle('display','none');\r
- this.effect();\r
- this.comm = $(this.comm);\r
- if (this.comm) {\r
- var a = this.comm.getElement('a');\r
- if (a) a.dispose();\r
- a = new Element('a', {\r
- href: '#'+this.imageObj.get('id'),\r
- html: this.imageObj.get('title'),\r
- }).injectInside(this.comm);\r
- }\r
- },\r
- \r
- wait: function(){\r
- this.timer = this.load.delay(this.options.wait,this);\r
- },\r
- \r
- play: function(num){\r
- this.position();\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
- quit: function(){\r
- this.stop();\r
- /* does not work */\r
- var oimg = this.oldImage.getElement('img');\r
- if (oimg) {\r
- oimg.dispose();\r
- delete oimg;\r
- }\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
- /* console.log(this.image) */\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
- this.imageObj.clone().replaces(img);\r
- //img.replaces(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 = new Fx.Morph(this.newImage, {\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.height;\r
- this.left = 0;\r
- this.topOut = this.height;\r
- this.leftOut = 0;\r
- \r
- }else if(dir == 'right'){\r
- this.top = 0;\r
- this.left = this.width;\r
- this.topOut = 0;\r
- this.leftOut = -this.width;\r
- \r
- }else if(dir == 'bottom'){\r
- this.top = this.height;\r
- this.left = 0;\r
- this.topOut = -this.height;\r
- this.leftOut = 0;\r
- \r
- }else if(dir == 'left'){\r
- this.top = 0;\r
- this.left = -this.width;\r
- this.topOut = 0;\r
- this.leftOut = this.width;\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.newImage.morph({\r
- duration: this.options.duration,\r
- transition: this.options.transition,\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
- this.oldImage.setStyles({\r
- opacity: 0\r
- });\r
- },\r
-\r
- position: function(){\r
- var myCoords = this.container.getCoordinates();\r
- this.width = myCoords.width;\r
- this.height = myCoords.height;\r
- /*\r
- this.width = this.container.getStyle('width').toInt();\r
- this.height = this.container.getStyle('height').toInt();\r
- */\r
- /* alert('container dim: '+this.width+'x'+this.height); */\r
- },\r
-\r
- reshow: function(){\r
- this.position();\r
- this.image--;\r
- this.load();\r
- },\r
- \r
-});\r
-slideShow.implement(new Options);\r
-slideShow.implement(new Events);\r
-\r
-\r
-/*************************************************************/\r
-\r
projects / mkgallery.git / blobdiff