switch to "new" slideshow (which is not working yet)
authorEugene Crosser <crosser@average.org>
Fri, 29 Aug 2008 13:48:04 +0000 (13:48 +0000)
committerEugene Crosser <crosser@average.org>
Fri, 29 Aug 2008 13:48:04 +0000 (13:48 +0000)
showwin and controls work fine

include/controls.js
include/gallery.js
include/show.js
include/showwin.js
include/slideshow.js [deleted file]
mkgallery.pl

index 0392bb77628584704143886b793375611d256b32..4aa3002535870253f2d29a0484e12c1eeac0e1e8 100644 (file)
@@ -60,7 +60,7 @@ var Controls = new Class({
                        id: 'controlPosition',
                }).injectInside(this.commbox);
                this.refbox = new Element('a', {
                        id: 'controlPosition',
                }).injectInside(this.commbox);
                this.refbox = new Element('a', {
-                       href: 'javascript: void();',
+                       href: 'javascript: void(1);',
                        html: 'title',
                }).addClass('controlRef').setProperties({
                        id: 'controlRef',
                        html: 'title',
                }).addClass('controlRef').setProperties({
                        id: 'controlRef',
index 5cd2b5d9261718c67b0c160bbabda9739e336ca2..08097589d49f25d9a5647556e9a46c9ae6d89e15 100644 (file)
         http://www.average.org/mkgallery/
 
        Uses mootools (1.2) http://www.mootools.net/
         http://www.average.org/mkgallery/
 
        Uses mootools (1.2) http://www.mootools.net/
-       Uses slideshow http://www.phatfusion.net/slideshow/
+       Uses multibox http://www.phatfusion.net/multibox/
+       Inspired by slideshow http://www.phatfusion.net/slideshow/
 */
 
 /*
        Use slideshow classes with the index generated by mkgallery.pl
 */
 
 */
 
 /*
        Use slideshow classes with the index generated by mkgallery.pl
 */
 
-var showControls = new Class({
-
-       getOptions: function(){
-               return {
-                       next: $empty,
-                       prev: $empty,
-                       stop: $empty,
-                       play: $empty,
-                       exit: $empty,
-               }
-       },
-
-       initialize: function(name,options){
-               this.setOptions(this.getOptions(), options)
-
-               this.container = $(name)
-
-               var buttons = ['prev','stop','play','next','exit','comm']
-               buttons.each(function(el){
-                       var sub = new Element('div')
-                       if (this.options[el]) {
-                               sub.addEvent('click', function() {
-                                       this.options[el]()
-                               }.bind(this))
-                       }
-                       sub.addClass('controlButton').setProperties({
-                               id: el,
-                               name: el,
-                       }).injectInside(this.container)
-               },this)
-       },
-
-})
-showControls.implement(new Options)
-
-/* Make overlay window and start slideshow */
-function showImage(id,doplay) {
-       var i=rimgs[id]
-       /* alert('show id='+id+' index='+i+' doplay='+doplay) */
-       showwin.show()
-       show.play(i)
-       if (!doplay) {
-               show.stop()
-       }
-       return false
-}
-
-/* Stop slideshow and return to index page */
-function showStop() {
-       show.quit()
-       showwin.hide()
-       return false
-}
-
-/* List of lists of img variations. Each image variation is a three-element  */
-/* array: [width, height, url]. Index of the outer array is the global ID.   */
-var vimgs=[]
-/*
- * [
- *  [ id, title, [
- *                [ width, height, url ]
- *                ...
- *               ]
- *   ...
- *  ]
- *  ...
- * ]
-*/
-/* resolve string ID to index No which is the index in vimgs[] array */
-var rimgs=[]
-
 /* Initialize everything, to be called on domready */
 function init_gallery() {
 /* Initialize everything, to be called on domready */
 function init_gallery() {
-       $$('.conceal').each(function(el){
-               el.setStyle('display', 'none')
-       })
-       $$('a.infoBox').each(function(el){
-               var url=el.get('href')
-               el.set('href',url+'?conceal')
-       })
-       $$('a.showStart').each(function(el){
-               el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
-       })
-       $$('a.showImage').each(function(el){
-               el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
-       })
+
+       /* List of lists of img variations. Each image variation is a three-element
+        * array: [width, height, url]. Index of the outer array is the global ID.
+        *
+        * [
+        *  [ id, title, [
+        *                [ width, height, url ]
+        *                ...
+        *               ]
+        *   ...
+        *  ]
+        *  ...
+        * ]
+       */
+       var vimgs=[];
+
+       /* resolve string ID to index No which is the index in vimgs[] array */
+       var rimgs=[];
+
+       /* Populate images list */
+
        $$('div.varimages').each(function(el,i){
        $$('div.varimages').each(function(el,i){
-               rimgs[el.id] = i
-               vimgs[i] = []
+               rimgs[el.id] = i;
+               vimgs[i] = [];
                el.getElements('a').each(function(ael,j){
                el.getElements('a').each(function(ael,j){
-                       dim = /(\d+)[^\d](\d+)/.exec(ael.text)
-                       w = dim[1]
-                       h = dim[2]
-                       vimgs[i][j]=[w,h,ael.href,el.id,el.title]
-               })
-       })
+                       dim = /(\d+)[^\d](\d+)/.exec(ael.text);
+                       w = dim[1];
+                       h = dim[2];
+                       vimgs[i][j]=[w,h,ael.href,el.id,el.title];
+               });
+       });
 
                        /* debugging output
 
                        /* debugging output
-       var msg='loaded '+vimgs.length+' image descriptions:'
+       var msg='loaded '+vimgs.length+' image descriptions:';
        vimgs.each(function(vimg,i){
        vimgs.each(function(vimg,i){
-               msg+='\nid='+i
+               msg+='\nid='+i;
                vimg.each(function(vimg,i){
                vimg.each(function(vimg,i){
-                       msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
-               })
-       })
-       alert(msg)
+                       msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2];
+               });
+       });
+       alert(msg);
                        /* end debugging output */
 
                        /* end debugging output */
 
-       var ovlparams = {}
-       ovl = new overlay(ovlparams)
+       /* Initialize objects */
+
+       var ovlparams = {};
+       ovl = new overlay(ovlparams);
 
        var iboxparams = {
                overlay: ovl,
 
        var iboxparams = {
                overlay: ovl,
@@ -131,39 +71,50 @@ function init_gallery() {
                movieWidth: 640,
                movieHeight: 480,
                descClassName: 'infoBoxDesc',
                movieWidth: 640,
                movieHeight: 480,
                descClassName: 'infoBoxDesc',
-       }
-       ibox = new multiBox('infoBox', iboxparams)
+       };
+       ibox = new multiBox('infoBox', iboxparams);
 
        var winparms = {
 
        var winparms = {
-               /* onClick: showStop,  /* temporarily */
-               embed: ['slideshowControls'],
-       }
-       showwin = new showWindow('slideshowContainer',winparms)
+               tohide: 'indexContainer',
+       };
+       var showwin = new showWindow('slideshowContainer',winparms);
+
+       var ctlparams = {
+       };
+       var ctl = new Controls('slideshowControls','slideshowContainer',
+                               ctlparams);
 
        var showparms = {
 
        var showparms = {
-               wait: 3000,
-               effect: 'fade',
-               duration: 1000,
-               loop: false, 
-               thumbnails: false,
-               onClick: function(i){alert(i)},
-               comment: 'comm',
-       }
-       show = new slideShow('slideshowContainer',vimgs,showparms)
+               cbStart: function(){ showwin.show(); },
+               cbExit: function(){ showwin.hide(); },
+       };
+       var show = new Show(vimgs,showwin,ctl,showparms);
 
 
-       var ctlparams = {
-               next: function(){show.next()},
-               prev: function(){show.previous()},
-               stop: function(){show.stop()},
-               play: function(){show.play()},
-               exit: function(){showStop()},
-       }
-       ctl = new showControls('slideshowControls',ctlparams)
+       /* Update HTML */
+
+       $$('.conceal').each(function(el){
+               el.setStyle('display', 'none');
+       });
+       $$('a.infoBox').each(function(el){
+               var url=el.get('href');
+               el.set('href',url+'?conceal');
+       });
+
+       $$('a.showStart').each(function(el){
+               el.addEvent('click',
+                               show.start.bind(show,[rimgs[el.get('id')],1]));
+       });
+       $$('a.showImage').each(function(el){
+               el.addEvent('click',
+                               show.start.bind(show,[rimgs[el.get('id')],0]));
+       });
+
+       /* Determine if we need to go directly into show mode */
 
 
-       parsedurl = parseUrl(document.URL)
-       /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
+       parsedurl = parseUrl(document.URL);
+       /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL); */
        if ($chk(parsedurl['anchor'])){
        if ($chk(parsedurl['anchor'])){
-               showImage(parsedurl['anchor'],0)
+               show.start(rimgs[parsedurl['anchor']],0);
        }
 }
 
        }
 }
 
index 427cb38a834fc0fec1887cf59035b7b35fbc1b58..2b5264f4be9d54bf460adc16f45bb6bd2844b612 100644 (file)
@@ -36,8 +36,8 @@ var Show = new Class({
 
        getOptions: function(){
                return {
 
        getOptions: function(){
                return {
-                       onClick: $empty,
-                       exit: function(){ alert('show exit undefined'); },
+                       cbStart: function(){ alert('show start undefined'); },
+                       cbExit: function(){ alert('show exit undefined'); },
                }
        },
 
                }
        },
 
@@ -82,8 +82,14 @@ var Show = new Class({
                                '<ref>','next called');
        },
 
                                '<ref>','next called');
        },
 
+       start: function(id, play){
+               this.options.cbStart();
+               /* real job here */
+               return false; /* tao make it usable from href links */
+       },
+
        exit: function(){
        exit: function(){
-               this.options.exit();
+               this.options.cbExit();
        },
 
        comm: function(){
        },
 
        comm: function(){
index 6171ba2ee47ab5538f4bb6392578a7d995576e73..3fac7f6b7de60a29bccb29fa38516cc41447cf0e 100644 (file)
@@ -18,6 +18,7 @@ var showWindow = new Class({
                return {
                        zIndex: 2,
                        container: document.body,
                return {
                        zIndex: 2,
                        container: document.body,
+                       tohide: '',
                        onClick: $empty,
                }
        },
                        onClick: $empty,
                }
        },
@@ -26,6 +27,7 @@ var showWindow = new Class({
                this.setOptions(this.getOptions(), options);
 
                this.options.container = $(this.options.container);
                this.setOptions(this.getOptions(), options);
 
                this.options.container = $(this.options.container);
+               this.options.tohide = $(this.options.tohide);
 
                this.container = new Element('div').addClass(name).
                setProperties({
 
                this.container = new Element('div').addClass(name).
                setProperties({
@@ -65,10 +67,16 @@ var showWindow = new Class({
        },
 
        show: function(){
        },
 
        show: function(){
+               if (this.options.tohide) {
+                       this.options.tohide.setStyle('display', 'none');
+               }
                this.container.setStyle('display', 'block');
        },
 
        hide: function(){
                this.container.setStyle('display', 'block');
        },
 
        hide: function(){
+               if (this.options.tohide) {
+                       this.options.tohide.setStyle('display', 'block');
+               }
                this.container.setStyle('display', 'none');
        }
 })
                this.container.setStyle('display', 'none');
        }
 })
diff --git a/include/slideshow.js b/include/slideshow.js
deleted file mode 100644 (file)
index 5d648c8..0000000
+++ /dev/null
@@ -1,479 +0,0 @@
-\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
index d5473c18779abd346930ce5a820aae30a360b139..6b3febe6c8a3adfd40aa75859d6b4a4cd8875f7d 100755 (executable)
@@ -577,10 +577,14 @@ sub startindex {
                                {-src=>$inc."overlay.js"},
                                {-src=>$inc."urlparser.js"},
                                {-src=>$inc."multibox.js"},
                                {-src=>$inc."overlay.js"},
                                {-src=>$inc."urlparser.js"},
                                {-src=>$inc."multibox.js"},
-                               {-src=>$inc."slideshow.js"},
+                               {-src=>$inc."showwin.js"},
+                               {-src=>$inc."controls.js"},
+                               {-src=>$inc."show.js"},
                                {-src=>$inc."gallery.js"},
                        ]),"\n",
                comment("Created by ".$version),"\n",
                                {-src=>$inc."gallery.js"},
                        ]),"\n",
                comment("Created by ".$version),"\n",
+               start_div({-class => 'indexContainer',
+                               -id => 'indexContainer'}),
                a({-href=>"../index.html"},"UP"),"\n",
                start_center,"\n",
                h1($title),"\n",
                a({-href=>"../index.html"},"UP"),"\n",
                start_center,"\n",
                h1($title),"\n",
@@ -591,7 +595,7 @@ sub endindex {
        my $self = shift;
        my $IND = $self->{-IND};
 
        my $self = shift;
        my $IND = $self->{-IND};
 
-       print $IND end_center,end_html,"\n";
+       print $IND end_center,end_div,end_html,"\n";
 
        close($IND) if ($IND);
        undef $self->{-IND};
 
        close($IND) if ($IND);
        undef $self->{-IND};