\r
/**************************************************************\r
\r
- Script : SlideShow\r
+ Script : slideShow\r
Version : 1.3\r
Authors : Samuel Birch\r
- Desc : \r
+ Desc : transitions between images\r
Licence : Open Source MIT Licence\r
\r
**************************************************************/\r
\r
-var SlideShow = new Class({\r
+var slideShow = new Class({\r
\r
getOptions: function(){\r
return {\r
duration: 2000,\r
transition: Fx.Transitions.linear,\r
direction: 'right', //top|right|bottom|left|random\r
- color: false,\r
+ //color: false,\r
wait: 5000,\r
- loop: false,\r
+ loop: true,\r
thumbnails: false,\r
thumbnailCls: 'outline',\r
- backgroundSlider: false,\r
+ backgroundSlider: false, //change to be an instance.\r
loadingCls: 'loading',\r
onClick: false\r
};\r
\r
this.container = $(container);\r
this.container.setStyles({\r
- position: 'relative',\r
+ /* position: 'relative', */\r
overflow: 'hidden'\r
});\r
if(this.options.onClick){\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
}\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
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 img = this.images[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];\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
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
\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
var img = this.newImage.getElement('img');\r
if(img){\r
- img.replaceWith(this.imageObj.clone());\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
- 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
},\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
$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(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
cloneImage: function(){\r
var img = this.oldImage.getElement('img');\r
if(img){\r
- img.replaceWith(this.imageObj.clone());\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
effect: function(){\r
this.animating = true;\r
- this.effectObj = this.newImage.effects({\r
+ this.effectObj = new Fx.Morph(this.newImage, {\r
duration: this.options.duration,\r
transition: this.options.transition\r
});\r
\r
setup: function(dir){\r
if(dir == 'top'){\r
- this.top = -this.container.getStyle('height').toInt();\r
+ this.top = -this.height;\r
this.left = 0;\r
- this.topOut = this.container.getStyle('height').toInt();\r
+ this.topOut = this.height;\r
this.leftOut = 0;\r
\r
}else if(dir == 'right'){\r
this.top = 0;\r
- this.left = this.container.getStyle('width').toInt();\r
+ this.left = this.width;\r
this.topOut = 0;\r
- this.leftOut = -this.container.getStyle('width').toInt();\r
+ this.leftOut = -this.width;\r
\r
}else if(dir == 'bottom'){\r
- this.top = this.container.getStyle('height').toInt();\r
+ this.top = this.height;\r
this.left = 0;\r
- this.topOut = -this.container.getStyle('height').toInt();\r
+ this.topOut = -this.height;\r
this.leftOut = 0;\r
\r
}else if(dir == 'left'){\r
this.top = 0;\r
- this.left = -this.container.getStyle('width').toInt();\r
+ this.left = -this.width;\r
this.topOut = 0;\r
- this.leftOut = this.container.getStyle('width').toInt();\r
+ this.leftOut = this.width;\r
\r
}else{\r
this.top = 0;\r
},\r
\r
wipe: function(){\r
- this.oldImage.effects({\r
+ this.newImage.morph({\r
duration: this.options.duration,\r
- transition: this.options.transition\r
- }).start({\r
+ transition: this.options.transition,\r
top: [0,this.topOut],\r
left: [0, this.leftOut]\r
})\r
\r
resetAnimation: function(){\r
this.animating = false;\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
+slideShow.implement(new Options);\r
+slideShow.implement(new Events);\r
\r
\r
/*************************************************************/\r
projects / mkgallery.git / blobdiff