X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fslideshow.js;h=5d648c8925f528cd5a0473766849671cf2fd9666;hp=cc312d9c1577815beedb58672a17c3a7e775a815;hb=f8281d2d6eaaa20f2c65d9753a2870df1310fd1a;hpb=224aa7103c52952fe867c36d3cb4f7217f4fbc4c diff --git a/include/slideshow.js b/include/slideshow.js index cc312d9..5d648c8 100644 --- a/include/slideshow.js +++ b/include/slideshow.js @@ -1,15 +1,15 @@ /************************************************************** - Script : SlideShow + Script : slideShow Version : 1.3 Authors : Samuel Birch - Desc : + Desc : transitions between images Licence : Open Source MIT Licence **************************************************************/ -var SlideShow = new Class({ +var slideShow = new Class({ getOptions: function(){ return { @@ -17,14 +17,15 @@ var SlideShow = new Class({ duration: 2000, transition: Fx.Transitions.linear, direction: 'right', //top|right|bottom|left|random - color: false, + //color: false, wait: 5000, - loop: false, + loop: true, thumbnails: false, thumbnailCls: 'outline', - backgroundSlider: false, + backgroundSlider: false, //change to be an instance. loadingCls: 'loading', - onClick: false + onClick: false, + comment: null, }; }, @@ -33,7 +34,7 @@ var SlideShow = new Class({ this.container = $(container); this.container.setStyles({ - position: 'relative', + /* position: 'relative', */ overflow: 'hidden' }); if(this.options.onClick){ @@ -41,8 +42,8 @@ var SlideShow = new Class({ this.options.onClick(this.imageLoaded); }.bind(this)); } - - + this.comm=this.options.comment; + this.imagesHolder = new Element('div').setStyles({ position: 'absolute', overflow: 'hidden', @@ -53,6 +54,7 @@ var SlideShow = new Class({ display: 'none' }).injectInside(this.container); + /* if($type(images) == 'string' && !this.options.thumbnails){ var imageList = []; $$('.'+images).each(function(el){ @@ -83,8 +85,11 @@ var SlideShow = new Class({ } }else{ + */ this.images = images; + /* } + */ this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({ position: 'absolute', @@ -117,18 +122,33 @@ var SlideShow = new Class({ this.stopped = true; this.started = false; this.animating = false; + window.addEvent('resize', this.reshow.bind(this)); + window.addEvent('scroll', this.reshow.bind(this)); }, load: function(){ $clear(this.timer); this.loading.setStyle('display','block'); this.image++; - var img = this.images[this.image]; + var i; + var width; + var height; + var img; + for (i=0;i= this.width || height >= this.height) { + break; + } + } + /* alert('req1 image '+img); */ delete this.imageObj; doLoad = true; this.imagesHolder.getElements('img').each(function(el){ - var src = this.images[this.image]; + var src = this.images[this.image][i][2]; + /* alert('req2 image '+src); */ if(el.src == src){ this.imageObj = el; doLoad = false; @@ -140,12 +160,45 @@ var SlideShow = new Class({ if(doLoad){ this.add = true; this.imageObj = new Asset.image(img, {onload: this.show.bind(this)}); + this.imageObj.set('width', width).set('height', height); } - + this.imageObj.set('id', this.images[this.image][i][3]); + this.imageObj.set('title', this.images[this.image][i][4]); + }, + + restyle: function(imgobj){ + var width = imgobj.get('width'); + var height = imgobj.get('height'); + var vfactor = this.width/width; + var hfactor = this.height/height; + var factor = 1; + if (vfactor < factor) { factor = vfactor; } + if (hfactor < factor) { factor = hfactor; } + factor *= .95; + if (factor < 1) { + height = Math.round(height * factor); + width = Math.round(width * factor); + } + var topoff = (this.height - height)/2; + var leftoff = (this.width - width)/2; + /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */ + imgobj.setStyles({ + position: 'absolute', + top: topoff, + left: leftoff, + width: width, + height: height, + }); }, show: function(add){ + this.restyle(this.imageObj); + var oimg = this.oldImage.getElement('img'); + if (oimg) { + this.restyle(oimg); + } + if(this.add){ this.imageObj.injectInside(this.imagesHolder); } @@ -156,29 +209,25 @@ var SlideShow = new Class({ }); var img = this.newImage.getElement('img'); if(img){ - img.replaceWith(this.imageObj.clone()); + this.imageObj.clone().replaces(img); + //img.replaces(this.imageObj.clone()); }else{ var obj = this.imageObj.clone(); obj.injectInside(this.newImage); } + this.imageLoaded = this.image; this.loading.setStyle('display','none'); - if(this.options.thumbnails){ - - if(this.options.backgroundSlider){ - var elT = this.thumbnailImages[this.image]; - this.bgSlider.move(elT); - this.bgSlider.setStart(elT); - }else{ - this.thumbnails.each(function(el,i){ - el.removeClass(this.options.thumbnailCls); - if(i == this.image){ - el.addClass(this.options.thumbnailCls); - } - },this); - } - } this.effect(); + this.comm = $(this.comm); + if (this.comm) { + var a = this.comm.getElement('a'); + if (a) a.dispose(); + a = new Element('a', { + href: '#'+this.imageObj.get('id'), + html: this.imageObj.get('title'), + }).injectInside(this.comm); + } }, wait: function(){ @@ -186,6 +235,7 @@ var SlideShow = new Class({ }, play: function(num){ + this.position(); if(this.stopped){ if(num > -1){this.image = num-1}; if(this.image < this.images.length){ @@ -204,6 +254,16 @@ var SlideShow = new Class({ $clear(this.timer); this.stopped = true; }, + + quit: function(){ + this.stop(); + /* does not work */ + var oimg = this.oldImage.getElement('img'); + if (oimg) { + oimg.dispose(); + delete oimg; + } + }, next: function(wait){ var doNext = true; @@ -216,6 +276,7 @@ var SlideShow = new Class({ if(doNext){ this.cloneImage(); $clear(this.timer); + /* console.log(this.image) */ if(this.image < this.images.length-1){ if(wait){ this.wait(); @@ -249,7 +310,8 @@ var SlideShow = new Class({ cloneImage: function(){ var img = this.oldImage.getElement('img'); if(img){ - img.replaceWith(this.imageObj.clone()); + this.imageObj.clone().replaces(img); + //img.replaces(this.imageObj.clone()); }else{ var obj = this.imageObj.clone(); obj.injectInside(this.oldImage); @@ -268,7 +330,7 @@ var SlideShow = new Class({ effect: function(){ this.animating = true; - this.effectObj = this.newImage.effects({ + this.effectObj = new Fx.Morph(this.newImage, { duration: this.options.duration, transition: this.options.transition }); @@ -313,28 +375,28 @@ var SlideShow = new Class({ setup: function(dir){ if(dir == 'top'){ - this.top = -this.container.getStyle('height').toInt(); + this.top = -this.height; this.left = 0; - this.topOut = this.container.getStyle('height').toInt(); + this.topOut = this.height; this.leftOut = 0; }else if(dir == 'right'){ this.top = 0; - this.left = this.container.getStyle('width').toInt(); + this.left = this.width; this.topOut = 0; - this.leftOut = -this.container.getStyle('width').toInt(); + this.leftOut = -this.width; }else if(dir == 'bottom'){ - this.top = this.container.getStyle('height').toInt(); + this.top = this.height; this.left = 0; - this.topOut = -this.container.getStyle('height').toInt(); + this.topOut = -this.height; this.leftOut = 0; }else if(dir == 'left'){ this.top = 0; - this.left = -this.container.getStyle('width').toInt(); + this.left = -this.width; this.topOut = 0; - this.leftOut = this.container.getStyle('width').toInt(); + this.leftOut = this.width; }else{ this.top = 0; @@ -355,10 +417,9 @@ var SlideShow = new Class({ }, wipe: function(){ - this.oldImage.effects({ + this.newImage.morph({ duration: this.options.duration, - transition: this.options.transition - }).start({ + transition: this.options.transition, top: [0,this.topOut], left: [0, this.leftOut] }) @@ -387,11 +448,31 @@ var SlideShow = new Class({ resetAnimation: function(){ this.animating = false; - } + this.oldImage.setStyles({ + opacity: 0 + }); + }, + + position: function(){ + var myCoords = this.container.getCoordinates(); + this.width = myCoords.width; + this.height = myCoords.height; + /* + this.width = this.container.getStyle('width').toInt(); + this.height = this.container.getStyle('height').toInt(); + */ + /* alert('container dim: '+this.width+'x'+this.height); */ + }, + + reshow: function(){ + this.position(); + this.image--; + this.load(); + }, }); -SlideShow.implement(new Options); -SlideShow.implement(new Events); +slideShow.implement(new Options); +slideShow.implement(new Events); /*************************************************************/