include/gallery.js

   1 /*
   2         This is a part of mkgallery.pl suite
   3         http://www.average.org/mkgallery/
   4
   5         Uses mootools (1.2) http://www.mootools.net/
   6         Uses slideshow http://www.phatfusion.net/slideshow/
   7 */
   8
   9 /*
  10         Slideshow
  11 */
  12
  13 var showWindow = new Class({
  14
  15         getOptions: function(){
  16                 return {
  17                         embed: [],
  18                         zIndex: 2,
  19                         container: document.body,
  20                         onClick: $empty,
  21                 }
  22         },
  23
  24         initialize: function(name,options){
  25                 this.setOptions(this.getOptions(), options)
  26
  27                 this.options.container = $(this.options.container)
  28
  29                 this.container = new Element('div').addClass(name).
  30                 setProperties({
  31                         id: name,
  32                         name: name,
  33                 }).setStyles({
  34                         position: 'absolute',
  35                         left: '0px',
  36                         top: '0px',
  37                         width: '100%',
  38                         zIndex: this.options.zIndex,
  39                         overflow: 'hidden',
  40                         display: 'none'
  41                 }).addEvent('click', function(){
  42                         this.options.onClick()
  43                 }.bind(this)).injectInside(this.options.container);
  44
  45                 this.embedded = []
  46                 this.options.embed.each(function(el){
  47                         var sub = new Element('div')
  48                         sub.addClass(el).setProperties({
  49                                 id: el,
  50                                 name: el,
  51                         }).injectInside(this.container)
  52                         this.embedded.push(sub)
  53                 },this)
  54
  55                 this.position()
  56
  57                 window.addEvent('resize', this.position.bind(this))
  58                 window.addEvent('scroll', this.position.bind(this))
  59         },
  60
  61         position: function(){
  62                 if(this.options.container == document.body){
  63                         this.h = window.getHeight()
  64                         this.s = window.getScrollTop()
  65                 }else{
  66                         var myCoords = this.options.container.getCoordinates()
  67                         this.h = myCoords.height
  68                         this.s = myCoords.top
  69                 }
  70                 this.container.setStyles({
  71                         top: this.s+'px',
  72                         height: this.h+'px'
  73                 })
  74         },
  75
  76         show: function(){
  77                 this.container.setStyle('display', 'block')
  78         },
  79
  80         hide: function(){
  81                 this.container.setStyle('display', 'none')
  82         }
  83 })
  84 showWindow.implement(new Options)
  85
  86 var showControls = new Class({
  87
  88         getOptions: function(){
  89                 return {
  90                         next: $empty,
  91                         prev: $empty,
  92                         stop: $empty,
  93                         play: $empty,
  94                         exit: $empty,
  95                 }
  96         },
  97
  98         initialize: function(name,options){
  99                 this.setOptions(this.getOptions(), options)
 100
 101                 this.container = $(name)
 102
 103                 var buttons = ['prev','stop','play','next','exit','comm']
 104                 buttons.each(function(el){
 105                         var sub = new Element('div')
 106                         if (el == 'comm') {
 107                                 this.comm = sub
 108                                 sub.set('text', 'this is a comment field')
 109                         /*
 110                         } else {
 111                                 sub.set('text', el)
 112                         */
 113                         }
 114                         if (this.options[el]) {
 115                                 sub.addEvent('click', function() {
 116                                         this.options[el]()
 117                                 }.bind(this))
 118                         }
 119                         sub.addClass('controlButton').setProperties({
 120                                 id: el,
 121                                 name: el,
 122                         }).injectInside(this.container)
 123                 },this)
 124         },
 125
 126         settext: function(text) {
 127                 this.comm.set(text)
 128         }
 129 })
 130 showControls.implement(new Options)
 131
 132 /* Make overlay window and start slideshow */
 133 function showImage(id,doplay) {
 134  var i=rimgs[id][0]
 135  /* alert('show id='+id+' index='+i+' doplay='+doplay) */
 136  showwin.show()
 137  show.play(i)
 138  if (!doplay) {
 139   show.stop()
 140  }
 141  return false
 142 }
 143
 144 /* Stop slideshow and return to index page */
 145 function showStop() {
 146  show.quit()
 147  showwin.hide()
 148  /*
 149  var img = show.newImage.getElement('img');
 150  if(img) {
 151   alert('remove element: '+img.get('tag')+'.'+img.get('class')+
 152    '#'+img.get('id')+' src='+img.get('src'))
 153   img.dispose()
 154  }
 155
 156  img = show.oldImage.getElement('img');
 157  if(img) {
 158   alert('remove element: '+img.get('tag')+'.'+img.get('class')+
 159    '#'+img.get('id')+' src='+img.get('src'))
 160   img.dispose()
 161  }
 162
 163  show.imagesHolder.getElements('img').each(function(el){
 164   alert('remove element: '+el.get('tag')+'.'+el.get('class')+'#'+el.get('id')+
 165    ' src='+el.get('src'))
 166   el.dispose()
 167  })
 168  */
 169  return false
 170 }
 171
 172 /* List of lists of img variations. Each image variation is a three-element  */
 173 /* array: [width, height, url]. Index of the outer array is the global ID.   */
 174 var vimgs=[]
 175 /*
 176  * [
 177  *  [
 178  *   [width, height, url]
 179  *   ...
 180  *  ]
 181  *  ...
 182  * ]
 183 */
 184 /* resolve string ID to index */
 185 var rimgs=[]
 186
 187 /* Initialize everything, to be called on domready */
 188 function init_gallery() {
 189  $$('.conceal').each(function(el){
 190   el.setStyle('display', 'none')
 191  })
 192  $$('a.infoBox').each(function(el){
 193   var url=el.get('href')
 194   el.set('href',url+'?conceal')
 195  })
 196  $$('a.showStart').each(function(el){
 197   el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
 198  })
 199  $$('a.showImage').each(function(el){
 200   el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
 201  })
 202  $$('div.varimages').each(function(el,i){
 203   rimgs[el.id] = [i, el.title]
 204   vimgs[i] = []
 205   el.getElements('a').each(function(ael,j){
 206    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
 207    w = dim[1]
 208    h = dim[2]
 209    vimgs[i][j]=[w,h,ael.href]
 210   })
 211  })
 212    /* debugging output
 213  var msg='loaded '+vimgs.length+' image descriptions:'
 214  vimgs.each(function(vimg,i){
 215   msg+='\nid='+i
 216   vimg.each(function(vimg,i){
 217    msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
 218   })
 219  })
 220  alert(msg)
 221    /* end debugging output */
 222
 223  var ovlparams = {}
 224  ovl = new overlay(ovlparams)
 225
 226  var iboxparams = {
 227   overlay: ovl,
 228   showNumbers: false,
 229   showControls: true,
 230   openFromLink: false,
 231   movieWidth: 640,
 232   movieHeight: 480,
 233   descClassName: 'infoBoxDesc',
 234  }
 235  ibox = new multiBox('infoBox', iboxparams)
 236
 237  var winparms = {
 238   /* onClick: showStop,  /* temporarily */
 239   embed: ['slideshowControls'],
 240  }
 241  showwin = new showWindow('slideshowContainer',winparms)
 242
 243  var showparms = {
 244   wait: 3000,
 245   effect: 'fade',
 246   duration: 1000,
 247   loop: false,
 248   thumbnails: false,
 249   onClick: function(i){alert(i)}
 250  }
 251  show = new slideShow('slideshowContainer',vimgs,showparms)
 252
 253  var ctlparams = {
 254   next: function(){show.next()},
 255   prev: function(){show.previous()},
 256   stop: function(){show.stop()},
 257   play: function(){show.play()},
 258   exit: function(){showStop()},
 259  }
 260  ctl = new showControls('slideshowControls',ctlparams)
 261
 262  parsedurl = parseUrl(document.URL)
 263  /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
 264  if ($chk(parsedurl['anchor'])){
 265   showImage(parsedurl['anchor'],0)
 266  }
 267 }
 268
 269 /* Initialization */
 270 window.addEvent('domready',init_gallery)