X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fgallery.js;h=40707fe1eb8afc94062155745280c5ecdf8fb896;hp=3c2e1f3d2445326ec22164102ca839dcd6b602fb;hb=0605e5404527fedc6da3fafbf8c7da1536aadd2c;hpb=f04746d096a80eab7143900e50f02ab0660e1975

diff --git a/include/gallery.js b/include/gallery.js
index 3c2e1f3..40707fe 100644
--- a/include/gallery.js
+++ b/include/gallery.js
@@ -1,35 +1,201 @@
-function showIbox(iboxid) {
- var ibox = document.getElementById(iboxid);
- var wwidth;
- var wheight;
- var bwidth = 400;
- var bheight = 300;
- if (self.innerWidth)
- {
-  wwidth = self.innerWidth;
-  wheight = self.innerHeight;
+/*
+        This is a part of mkgallery.pl suite
+        http://www.average.org/mkgallery/
+
+	Uses mootools (1.2) http://www.mootools.net/
+	Uses slideshow http://www.phatfusion.net/slideshow/
+*/
+
+/*
+	Slideshow
+*/
+
+var showWindow = new Class({
+
+	getOptions: function(){
+		return {
+			zIndex: 2,
+			container: document.body,
+			onClick: $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 showImage(id,doplay) {
+ var i=rimgs[id]
+ /* alert('show id='+id+' index='+i+' doplay='+doplay) */
+ showwin.show()
+ show.play(i)
+ if (!doplay) {
+  show.stop()
  }
- else if (document.documentElement && document.documentElement.clientWidth)
- {
-  wwidth = document.documentElement.clientWidth;
-  wheight = document.documentElement.clientHeight;
+ return false
+}
+
+/* Stop slideshow and return to index page */
+function showStop() {
+ show.stop()
+ showwin.hide()
+ /*
+ var img = show.newImage.getElement('img');
+ if(img) {
+  alert('remove element: '+img.get('tag')+'.'+img.get('class')+
+   '#'+img.get('id')+' src='+img.get('src'))
+  img.dispose()
  }
- else if (document.body)
- {
-  wwidth = document.body.clientWidth;
-  wheight = document.body.clientHeight;
+
+ img = show.oldImage.getElement('img');
+ if(img) {
+  alert('remove element: '+img.get('tag')+'.'+img.get('class')+
+   '#'+img.get('id')+' src='+img.get('src'))
+  img.dispose()
  }
- ibox.style.width = bwidth + "px";
- ibox.style.height = bheight + "px";
- ibox.style.left = ((wwidth - bwidth) / 2) + "px";
- ibox.style.top = ((wheight - bheight) / 2) + "px";
- // alert('wwidth='+wwidth+'; bwidth='+bwidth+'; wheight='+wheight+'; bheight='+bheight);
- ibox.zIndex = '0';
- ibox.style.display = 'block';
- return false;
+
+ show.imagesHolder.getElements('img').each(function(el){
+  alert('remove element: '+el.get('tag')+'.'+el.get('class')+'#'+el.get('id')+
+   ' src='+el.get('src'))
+  el.dispose()
+ })
+ */
+ return false
 }
-function HideIbox(iboxid) {
- var ibox = document.getElementById(iboxid);
- ibox.zIndex = '1000';
- ibox.style.display = 'none';
+
+/* 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]
+ *   ...
+ *  ]
+ *  ...
+ * ]
+*/
+/* resolve string ID to index */
+var rimgs=[]
+
+/* Initialize everything, to be called on domready */
+function init_gallery() {
+ $$('.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', showImage.bind(el,[el.get('id'),1]))
+ })
+ $$('a.showImage').each(function(el){
+  el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
+ })
+ $$('div.varimages').each(function(el,i){
+  var id=el.id
+  rimgs[id]=i
+  vimgs[i]=[]
+  el.getElements('a').each(function(ael,j){
+   dim = /(\d+)[^\d](\d+)/.exec(ael.text)
+   w = dim[1]
+   h = dim[2]
+   vimgs[i][j]=[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 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 = {}
+ showwin = new showWindow('slideshowWindow',winparms)
+
+ var showparms = {
+  wait: 3000,
+  effect: 'fade',
+  duration: 1000,
+  loop: false, 
+  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'])){
+  showImage(parsedurl['anchor'],0)
+ }
 }
+
+/* Initialization */
+window.addEvent('domready',init_gallery)