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                         zIndex: 2,
  18                         container: document.body,
  19                         onClick: $empty,
  20                 }
  21         },
  22
  23         initialize: function(div,options){
  24                 this.setOptions(this.getOptions(), options)
  25
  26                 this.options.container = $(this.options.container)
  27
  28                 this.div = $(div)
  29                 this.div.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                 })
  38                 this.div.addEvent('click', function(){
  39                         this.options.onClick()
  40                 }.bind(this))
  41
  42                 this.position()
  43
  44                 window.addEvent('resize', this.position.bind(this))
  45                 window.addEvent('scroll', this.position.bind(this))
  46         },
  47
  48         position: function(){
  49                 if(this.options.container == document.body){
  50                         var h = window.getHeight()+'px'
  51                         var s = window.getScrollTop()+'px'
  52                         this.div.setStyles({top: s, height: h})
  53                 }else{
  54                         var myCoords = this.options.container.getCoordinates()
  55                         this.div.setStyles({
  56                                 top: myCoords.top+'px',
  57                                 height: myCoords.height+'px',
  58                                 left: myCoords.left+'px',
  59                                 width: myCoords.width+'px'
  60                         })
  61                 }
  62         },
  63
  64         show: function(){
  65                 this.div.setStyles({display: 'block'})
  66         },
  67
  68         hide: function(){
  69                 this.div.setStyles({display: 'none'})
  70         }
  71 })
  72 showWindow.implement(new Options)
  73
  74 /* Make overlay window and start slideshow */
  75 function showImage(id,doplay) {
  76  var i=rimgs[id]
  77  /* alert('show id='+id+' index='+i+' doplay='+doplay) */
  78  showwin.show()
  79  show.play(i)
  80  if (!doplay) {
  81   show.stop()
  82  }
  83  return false
  84 }
  85
  86 /* Stop slideshow and return to index page */
  87 function showStop() {
  88  show.stop()
  89  showwin.hide()
  90  /*
  91  var img = show.newImage.getElement('img');
  92  if(img) {
  93   alert('remove element: '+img.get('tag')+'.'+img.get('class')+
  94    '#'+img.get('id')+' src='+img.get('src'))
  95   img.dispose()
  96  }
  97
  98  img = show.oldImage.getElement('img');
  99  if(img) {
 100   alert('remove element: '+img.get('tag')+'.'+img.get('class')+
 101    '#'+img.get('id')+' src='+img.get('src'))
 102   img.dispose()
 103  }
 104
 105  show.imagesHolder.getElements('img').each(function(el){
 106   alert('remove element: '+el.get('tag')+'.'+el.get('class')+'#'+el.get('id')+
 107    ' src='+el.get('src'))
 108   el.dispose()
 109  })
 110  */
 111  return false
 112 }
 113
 114 /* List of lists of img variations. Each image variation is a three-element  */
 115 /* array: [width, height, url]. Index of the outer array is the global ID.   */
 116 var vimgs=[]
 117 /*
 118  * [
 119  *  [
 120  *   [width, height, url]
 121  *   ...
 122  *  ]
 123  *  ...
 124  * ]
 125 */
 126 /* resolve string ID to index */
 127 var rimgs=[]
 128
 129 /* Initialize everything, to be called on domready */
 130 function init_gallery() {
 131  $$('.conceal').each(function(el){
 132   el.setStyle('display', 'none')
 133  })
 134  $$('a.infoBox').each(function(el){
 135   var url=el.get('href')
 136   el.set('href',url+'?conceal')
 137  })
 138  $$('a.showStart').each(function(el){
 139   el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
 140  })
 141  $$('a.showImage').each(function(el){
 142   el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
 143  })
 144  $$('div.varimages').each(function(el,i){
 145   var id=el.id
 146   rimgs[id]=i
 147   vimgs[i]=[]
 148   el.getElements('a').each(function(ael,j){
 149    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
 150    w = dim[1]
 151    h = dim[2]
 152    vimgs[i][j]=[w,h,ael.href]
 153   })
 154  })
 155    /* debugging output
 156  var msg='loaded '+vimgs.length+' image descriptions:'
 157  vimgs.each(function(vimg,i){
 158   msg+='\nid='+i
 159   vimg.each(function(vimg,i){
 160    msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
 161   })
 162  })
 163  alert(msg)
 164    /* end debugging output */
 165
 166  var ovlparams = {}
 167  ovl = new overlay(ovlparams)
 168
 169  var iboxparams = {
 170   overlay: ovl,
 171   showNumbers: false,
 172   showControls: true,
 173   openFromLink: false,
 174   movieWidth: 640,
 175   movieHeight: 480,
 176   descClassName: 'infoBoxDesc',
 177  }
 178  ibox = new multiBox('infoBox', iboxparams)
 179
 180  var winparms = {}
 181  showwin = new showWindow('slideshowWindow',winparms)
 182
 183  var showparms = {
 184   wait: 3000,
 185   effect: 'fade',
 186   duration: 1000,
 187   loop: false,
 188   thumbnails: true,
 189   onClick: function(i){alert(i)}
 190  }
 191  show = new slideShow('slideshowContainer','slideshowThumbnail',showparms)
 192
 193  parsedurl = parseUrl(document.URL)
 194  /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
 195  if ($chk(parsedurl['anchor'])){
 196   showImage(parsedurl['anchor'],0)
 197  }
 198 }
 199
 200 /* Initialization */
 201 window.addEvent('domready',init_gallery)