]> www.average.org Git - mkgallery.git/blobdiff - include/gallery.js
basically it works
[mkgallery.git] / include / gallery.js
index 89be9dffa4efbfc902a64b1e68263a8e7cd4fa18..e4eeef39ebd4ba18b2b8acc47b0fe105013091fc 100644 (file)
 /*
+       $Id$
+
         This is a part of mkgallery.pl suite
         http://www.average.org/mkgallery/
 
-       Uses mootools (1.1) http://www.mootools.net/
-       Uses slideshow http://www.phatfusion.net/slideshow/
+       Uses mootools (1.2) http://www.mootools.net/
+       Uses multibox http://www.phatfusion.net/multibox/
+       Inspired by slideshow http://www.phatfusion.net/slideshow/
 */
 
 /*
-       Slideshow
+       Use slideshow classes with the index generated by mkgallery.pl
 */
 
-var ShowWindow = new Class({
-
-       getOptions: function(){
-               return {
-                       zIndex: 2,
-                       container: document.body,
-                       onClick: Class.empty
-               };
-       },
-
-       initialize: function(div,options){
-               this.setOptions(this.getOptions(), options);
-
-               this.options.container = $(this.options.container);
-
-               this.div = $(div);
-               this.div.setStyles({
-                       position: 'absolute',
-                       left: '0px',
-                       top: '0px',
-                       width: '100%',
-                       zIndex: this.options.zIndex,
-                       overflow: 'hidden',
-                       display: 'none'
-               });
-               this.div.addEvent('click', function(){
-                       this.options.onClick();
-               }.bind(this));
-
-               this.position();
-
-               window.addEvent('resize', this.position.bind(this));
-               window.addEvent('scroll', this.position.bind(this));
-       },
-
-       position: function(){
-               if(this.options.container == document.body){
-                       var h = window.getHeight()+'px';
-                       var s = window.getScrollTop()+'px';
-                       this.div.setStyles({top: s, height: h});
-               }else{
-                       var myCoords = this.options.container.getCoordinates();
-                       this.div.setStyles({
-                               top: myCoords.top+'px',
-                               height: myCoords.height+'px',
-                               left: myCoords.left+'px',
-                               width: myCoords.width+'px'
-                       });
-               }
-       },
-
-       show: function(){
-               this.div.setStyles({display: 'block'});
-       },
-
-       hide: function(){
-               this.div.setStyles({display: 'none'});
-       }
-});
-ShowWindow.implement(new Options);
-
-/* Make overlay window and start slideshow */
-function run_slideshow(startid) {
- showwin.show();
- show.stop();
- if (startid < 0) {
-  show.play(0);
- } else {
-  show.play(startid);
-  show.stop();
- }
- return false;
-}
-
-/* Stop slideshow and return to index page */
-function stop_slideshow() {
- show.stop();
- 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=[]
-/*
- * [
- *  [
- *   [width, height, url]
- *   ...
- *  ]
- *  ...
- * ]
-*/
 /* Initialize everything, to be called on domready */
 function init_gallery() {
- $$('div.varimages').each(function(el){
-  var id=el.id
-  vimgs[id]=[]
-  el.getElements('a').each(function(ael,i){
-   dim = /(\d+)[^\d](\d+)/.exec(ael.text)
-   w = dim[1]
-   h = dim[2]
-   vimgs[id][i]=[w,h,ael.href]
-  })
- })
-   /* debugging output
- var msg='loaded '+vimgs.length+' image descriptions:'
- vimgs.each(function(vimg,i){
-  msg+='\nid='+i
-  vimg.each(function(vimg,i){
-   msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
-  })
- })
- alert(msg)
-   /* end debugging output */
-
- var iboxparams = {
-  useOverlay: true,
-  showNumbers: false,
-  openFromLink: false
- }
- ibox = new MultiBox('infobox', iboxparams)
-
- var winparms = {}
- showwin = new ShowWindow('slideshowWindow',winparms)
-
- var showparms = {
-  wait: 3000,
-  effect: 'fade',
-  duration: 1000,
-  loop: true, 
-  thumbnails: true,
-  onClick: function(i){alert(i)}
- }
- show = new SlideShow('slideshowContainer','slideshowThumbnail',showparms)
-
- parsedurl = parseUrl(document.URL)
- // alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL)
- if ($chk(parsedurl['anchor'])){
-  run_slideshow(parsedurl['anchor'])
- }
+
+       /* 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){
+               rimgs[el.id] = i;
+               vimgs[i] = [el.id, el.title, []];
+               el.getElements('a').each(function(ael,j){
+                       dim = /(\d+)[^\d](\d+)/.exec(ael.text);
+                       w = dim[1];
+                       h = dim[2];
+                       vimgs[i][2][j]=[w,h,ael.href];
+               });
+       });
+
+                       /* debugging output
+       var msg='loaded '+vimgs.length+' image descriptions:';
+       vimgs.each(function(vimg,i){
+               msg+='\nid='+i+' ('+vimg[0]+') title='+vimg[1];
+               vimg[2].each(function(vv,i){
+                       msg+='\n     w='+vv[0]+' h='+vv[1]+' url='+vv[2];
+               });
+       });
+       alert(msg);
+                       /* end debugging output */
+
+       /* Initialize objects */
+
+       var ovlparams = {};
+       ovl = new overlay(ovlparams);
+
+       var iboxparams = {
+               overlay: ovl,
+               showNumbers: false,
+               showControls: true,
+               openFromLink: false,
+               movieWidth: 640,
+               movieHeight: 480,
+               descClassName: 'infoBoxDesc',
+       };
+       ibox = new multiBox('infoBox', iboxparams);
+
+       var winparms = {
+               tohide: 'indexContainer',
+       };
+       var showwin = new showWindow('slideshowContainer',winparms);
+
+       var ctlparams = {
+       };
+       var ctl = new Controls('slideshowControls','slideshowContainer',
+                               ctlparams);
+
+       var showparms = {
+               cbStart: function(){ showwin.show(); },
+               cbExit: function(){ showwin.hide(); },
+       };
+       var show = new Show(vimgs,showwin,ctl,showparms);
+
+       /* 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); */
+       if ($chk(parsedurl['anchor'])){
+               show.start(rimgs[parsedurl['anchor']],0);
+       }
 }
 
 /* Initialization */