wip
[mkgallery.git] / include / slideshow.js
index cc312d9c1577815beedb58672a17c3a7e775a815..5d648c8925f528cd5a0473766849671cf2fd9666 100644 (file)
@@ -1,15 +1,15 @@
 \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
@@ -17,14 +17,15 @@ var SlideShow = new Class({
                        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
+                       onClick: false,\r
+                       comment: null,\r
                };\r
        },\r
 \r
@@ -33,7 +34,7 @@ var SlideShow = new Class({
                \r
                this.container = $(container);\r
                this.container.setStyles({\r
-                       position: 'relative',\r
+                       /* position: 'relative', */\r
                        overflow: 'hidden'\r
                });\r
                if(this.options.onClick){\r
@@ -41,8 +42,8 @@ var SlideShow = new Class({
                                this.options.onClick(this.imageLoaded);\r
                        }.bind(this));\r
                }\r
-               \r
-               \r
+               this.comm=this.options.comment;\r
+\r
                this.imagesHolder = new Element('div').setStyles({\r
                        position: 'absolute',\r
                        overflow: 'hidden',\r
@@ -53,6 +54,7 @@ var SlideShow = new Class({
                        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
@@ -83,8 +85,11 @@ var SlideShow = new Class({
                        }\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
@@ -117,18 +122,33 @@ var SlideShow = new Class({
                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
@@ -140,12 +160,45 @@ var SlideShow = new Class({
                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
+               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
@@ -156,29 +209,25 @@ var SlideShow = new Class({
                });\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
+               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
@@ -186,6 +235,7 @@ var SlideShow = new Class({
        },\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
@@ -204,6 +254,16 @@ var SlideShow = new Class({
                $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
@@ -216,6 +276,7 @@ var SlideShow = new Class({
                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
@@ -249,7 +310,8 @@ var SlideShow = new Class({
        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
@@ -268,7 +330,7 @@ var SlideShow = new Class({
        \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
@@ -313,28 +375,28 @@ var SlideShow = new Class({
        \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
@@ -355,10 +417,9 @@ var SlideShow = new Class({
        },\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
@@ -387,11 +448,31 @@ var SlideShow = new Class({
        \r
        resetAnimation: function(){\r
                this.animating = false;\r
-       }\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
+slideShow.implement(new Options);\r
+slideShow.implement(new Events);\r
 \r
 \r
 /*************************************************************/\r