include/gallery.js

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