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