switch to mulibox for info box
authorEugene Crosser <crosser@average.org>
Mon, 18 Aug 2008 20:56:21 +0000 (20:56 +0000)
committerEugene Crosser <crosser@average.org>
Mon, 18 Aug 2008 20:56:21 +0000 (20:56 +0000)
include/gallery.js
include/multibox.js [new file with mode: 0644]
include/overlay.js [new file with mode: 0644]
mkgallery.pl

index 0900c799e99a70185a57c87be1738bfe9643906c..89be9dffa4efbfc902a64b1e68263a8e7cd4fa18 100644 (file)
@@ -6,30 +6,6 @@
        Uses slideshow http://www.phatfusion.net/slideshow/
 */
 
        Uses slideshow http://www.phatfusion.net/slideshow/
 */
 
-function showIbox(iboxid) {
- var ibox = document.getElementById(iboxid);
- var bwidth = 400;
- var bheight = 300;
-
- var wwidth = window.getWidth();
- var wheight = window.getHeight();
-
- ibox.style.top = window.getScrollTop() + ((wheight - bheight) / 2) + 'px';
- ibox.style.left = ((wwidth - bwidth) / 2) + "px";
- ibox.style.width = bwidth + "px";
- ibox.style.height = bheight + "px";
- // alert('wwidth='+wwidth+'; bwidth='+bwidth+'; wheight='+wheight+'; bheight='+bheight);
- ibox.zIndex = '0';
- ibox.style.display = 'block';
- return false;
-}
-function HideIbox(iboxid) {
- var ibox = document.getElementById(iboxid);
- ibox.zIndex = '1000';
- ibox.style.display = 'none';
- return false;
-}
-
 /*
        Slideshow
 */
 /*
        Slideshow
 */
@@ -150,6 +126,13 @@ function init_gallery() {
  alert(msg)
    /* end debugging output */
 
  alert(msg)
    /* end debugging output */
 
+ var iboxparams = {
+  useOverlay: true,
+  showNumbers: false,
+  openFromLink: false
+ }
+ ibox = new MultiBox('infobox', iboxparams)
+
  var winparms = {}
  showwin = new ShowWindow('slideshowWindow',winparms)
 
  var winparms = {}
  showwin = new ShowWindow('slideshowWindow',winparms)
 
diff --git a/include/multibox.js b/include/multibox.js
new file mode 100644 (file)
index 0000000..a96672d
--- /dev/null
@@ -0,0 +1,677 @@
+\r
+/**************************************************************\r
+\r
+       Script          : MultiBox\r
+       Version         : 1.3.1\r
+       Authors         : Samuel Birch\r
+       Desc            : Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe\r
+       Licence         : Open Source MIT Licence\r
+\r
+**************************************************************/\r
+\r
+var MultiBox = new Class({\r
+       \r
+       getOptions: function(){\r
+               return {\r
+                       initialWidth: 250,\r
+                       initialHeight: 250,\r
+                       container: document.body,\r
+                       useOverlay: false,\r
+                       contentColor: '#FFF',\r
+                       showNumbers: true,\r
+                       showControls: true,\r
+                       //showThumbnails: false,\r
+                       //autoPlay: false,\r
+                       waitDuration: 2000,\r
+                       descClassName: false,\r
+                       descMinWidth: 400,\r
+                       descMaxWidth: 600,\r
+                       movieWidth: 400,\r
+                       movieHeight: 300,\r
+                       offset: {x:0, y:0},\r
+                       fixedTop: false,\r
+                       path: 'files/',\r
+                       onOpen: Class.empty,\r
+                       onClose: Class.empty,\r
+                       openFromLink: true,\r
+                       relativeToWindow: true\r
+               };\r
+       },\r
+\r
+       initialize: function(className, options){\r
+               this.setOptions(this.getOptions(), options);\r
+               \r
+               this.openClosePos = {};\r
+               this.timer = 0;\r
+               this.contentToLoad = {};\r
+               this.index = 0;\r
+               this.opened = false;\r
+               this.contentObj = {};\r
+               this.containerDefaults = {};\r
+               \r
+               if(this.options.useOverlay){\r
+                       this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)});\r
+               }\r
+               \r
+               this.content = $$('.'+className);\r
+               if(this.options.descClassName){\r
+                       this.descriptions = $$('.'+this.options.descClassName);\r
+                       this.descriptions.each(function(el){\r
+                               el.setStyle('display', 'none');\r
+                       });\r
+               }\r
+               \r
+               this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);\r
+               this.iframe = new Element('iframe').setProperties({\r
+                       'id': 'multiBoxIframe',\r
+                       'name': 'mulitBoxIframe',\r
+                       'src': 'javascript:void(0);',\r
+                       'frameborder': 1,\r
+                       'scrolling': 'no'\r
+               }).setStyles({\r
+                       'position': 'absolute',\r
+                       'top': -20,\r
+                       'left': -20,\r
+                       'width': '115%',\r
+                       'height': '115%',\r
+                       'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
+                       'opacity': 0\r
+               }).injectInside(this.container);\r
+               this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);\r
+               \r
+               this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));\r
+               \r
+               this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').injectInside(this.container);\r
+               this.controls = new Element('div').addClass('MultiBoxControls').injectInside(this.controlsContainer);\r
+               \r
+               this.previousButton = new Element('div').addClass('MultiBoxPrevious').injectInside(this.controls).addEvent('click', this.previous.bind(this));\r
+               this.nextButton = new Element('div').addClass('MultiBoxNext').injectInside(this.controls).addEvent('click', this.next.bind(this));\r
+               \r
+               this.title = new Element('div').addClass('MultiBoxTitle').injectInside(this.controls);\r
+               this.number = new Element('div').addClass('MultiBoxNumber').injectInside(this.controls);\r
+               this.description = new Element('div').addClass('MultiBoxDescription').injectInside(this.controls);\r
+               \r
+               \r
+               \r
+               if(this.content.length == 1){\r
+                       this.title.setStyles({\r
+                               'margin-left': 0\r
+                       });\r
+                       this.description.setStyles({\r
+                               'margin-left': 0\r
+                       });\r
+                       this.previousButton.setStyle('display', 'none');\r
+                       this.nextButton.setStyle('display', 'none');\r
+                       this.number.setStyle('display', 'none');\r
+               }\r
+               \r
+               new Element('div').setStyle('clear', 'both').injectInside(this.controls);\r
+               \r
+               this.content.each(function(el,i){\r
+                       el.index = i;\r
+                       el.addEvent('click', function(e){\r
+                               new Event(e).stop();\r
+                               this.open(el);\r
+                       }.bind(this));\r
+                       if(el.href.indexOf('#') > -1){\r
+                               el.content = $(el.href.substr(el.href.indexOf('#')+1));\r
+                               if(el.content){el.content.setStyle('display','none');}\r
+                       }\r
+               }, this);\r
+               \r
+               this.containerEffects = new Fx.Styles(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});\r
+               this.controlEffects = new Fx.Styles(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut});\r
+               \r
+               this.reset();\r
+       },\r
+       \r
+       setContentType: function(link){\r
+               var str = link.href.substr(link.href.lastIndexOf('.')+1).toLowerCase();\r
+               var contentOptions = {};\r
+               if($chk(link.rel)){\r
+                       var optArr = link.rel.split(',');\r
+                       optArr.each(function(el){\r
+                               var ta = el.split(':');\r
+                               contentOptions[ta[0]] = ta[1];\r
+                       });\r
+               }\r
+               \r
+               if(contentOptions.type != undefined){\r
+                       str = contentOptions.type;\r
+               }\r
+               \r
+               this.contentObj = {};\r
+               this.contentObj.url = link.href;\r
+               this.contentObj.xH = 0;\r
+               \r
+               if(contentOptions.width){\r
+                       this.contentObj.width = contentOptions.width;\r
+               }else{\r
+                       this.contentObj.width = this.options.movieWidth;\r
+               }\r
+               if(contentOptions.height){\r
+                       this.contentObj.height = contentOptions.height; \r
+               }else{\r
+                       this.contentObj.height = this.options.movieHeight;\r
+               }\r
+               if(contentOptions.panel){\r
+                       this.panelPosition = contentOptions.panel;\r
+               }else{\r
+                       this.panelPosition = this.options.panel;\r
+               }\r
+               \r
+               \r
+               switch(str){\r
+                       case 'jpg':\r
+                       case 'gif':\r
+                       case 'png':\r
+                               this.type = 'image';\r
+                               break;\r
+                       case 'swf':\r
+                               this.type = 'flash';\r
+                               break;\r
+                       case 'flv':\r
+                               this.type = 'flashVideo';\r
+                               this.contentObj.xH = 70;\r
+                               break;\r
+                       case 'mov':\r
+                               this.type = 'quicktime';\r
+                               break;\r
+                       case 'wmv':\r
+                               this.type = 'windowsMedia';\r
+                               break;\r
+                       case 'rv':\r
+                       case 'rm':\r
+                       case 'rmvb':\r
+                               this.type = 'real';\r
+                               break;\r
+                       case 'mp3':\r
+                               this.type = 'flashMp3';\r
+                               this.contentObj.width = 320;\r
+                               this.contentObj.height = 70;\r
+                               break;\r
+                       case 'element':\r
+                               this.type = 'htmlelement';\r
+                               this.elementContent = link.content;\r
+                               this.elementContent.setStyles({\r
+                                       display: 'block',\r
+                                       opacity: 0\r
+                               })\r
+       \r
+                               if(this.elementContent.getStyle('width') != 'auto'){\r
+                                       this.contentObj.width = this.elementContent.getStyle('width');\r
+                               }\r
+                               \r
+                               this.contentObj.height = this.elementContent.getSize().size.y;\r
+                               this.elementContent.setStyles({\r
+                                       display: 'none',\r
+                                       opacity: 1\r
+                               })\r
+                               break;\r
+                               \r
+                       default:\r
+                               \r
+                               this.type = 'iframe';\r
+                               if(contentOptions.ajax){\r
+                                       this.type = 'ajax';\r
+                               }\r
+                               break;\r
+               }\r
+       },\r
+       \r
+       reset: function(){\r
+               this.container.setStyles({\r
+                       'opacity': 0,\r
+                       'display': 'none'\r
+               });\r
+               this.controlsContainer.setStyles({\r
+                       'height': 0\r
+               });\r
+               this.removeContent();\r
+               this.previousButton.removeClass('MultiBoxButtonDisabled');\r
+               this.nextButton.removeClass('MultiBoxButtonDisabled');\r
+               this.opened = false;\r
+       },\r
+       \r
+       getOpenClosePos: function(el){\r
+               if (this.options.openFromLink) {\r
+                       if (el.getFirst()) {\r
+                               var w = el.getFirst().getCoordinates().width - (this.container.getStyle('border').toInt() * 2);\r
+                               if (w < 0) {\r
+                                       w = 0\r
+                               }\r
+                               var h = el.getFirst().getCoordinates().height - (this.container.getStyle('border').toInt() * 2);\r
+                               if (h < 0) {\r
+                                       h = 0\r
+                               }\r
+                               this.openClosePos = {\r
+                                       width: w,\r
+                                       height: h,\r
+                                       top: el.getFirst().getCoordinates().top,\r
+                                       left: el.getFirst().getCoordinates().left\r
+                               };\r
+                       }\r
+                       else {\r
+                               var w = el.getCoordinates().width - (this.container.getStyle('border').toInt() * 2);\r
+                               if (w < 0) {\r
+                                       w = 0\r
+                               }\r
+                               var h = el.getCoordinates().height - (this.container.getStyle('border').toInt() * 2);\r
+                               if (h < 0) {\r
+                                       h = 0\r
+                               }\r
+                               this.openClosePos = {\r
+                                       width: w,\r
+                                       height: h,\r
+                                       top: el.getCoordinates().top,\r
+                                       left: el.getCoordinates().left\r
+                               };\r
+                       }\r
+               }else{\r
+                       if(this.options.fixedTop){\r
+                               var top = this.options.fixedTop;\r
+                       }else{\r
+                               var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;\r
+                       }\r
+                       this.openClosePos = {\r
+                               width: this.options.initialWidth,\r
+                               height: this.options.initialHeight,\r
+                               top: top,\r
+                               left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x\r
+                       };\r
+               }\r
+               return this.openClosePos;\r
+       },\r
+       \r
+       open: function(el){\r
+       \r
+               this.options.onOpen();\r
+       \r
+               this.index = this.content.indexOf(el);\r
+               \r
+               this.openId = el.getProperty('id');\r
+               \r
+               if(!this.opened){\r
+                       this.opened = true;\r
+                       \r
+                       if(this.options.useOverlay){\r
+                               this.overlay.show();\r
+                       }\r
+                       \r
+                       this.container.setStyles(this.getOpenClosePos(el));\r
+                       this.container.setStyles({\r
+                               opacity: 0,\r
+                               display: 'block'\r
+                       });\r
+                       \r
+                       if(this.options.fixedTop){\r
+                               var top = this.options.fixedTop;\r
+                       }else{\r
+                               var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y;\r
+                       }\r
+                       \r
+                       this.containerEffects.start({\r
+                               width: this.options.initialWidth,\r
+                               height: this.options.initialHeight,\r
+                               top: top,\r
+                               left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x,\r
+                               opacity: [0, 1]\r
+                       });\r
+                       \r
+                       this.load(this.index);\r
+               \r
+               }else{\r
+                       if (this.options.showControls) {\r
+                               this.hideControls();\r
+                       }\r
+                       this.getOpenClosePos(this.content[this.index]);\r
+                       this.timer = this.hideContent.bind(this).delay(500);\r
+                       this.timer = this.load.pass(this.index, this).delay(1100);\r
+                       \r
+               }\r
+               \r
+       },\r
+       \r
+       getContent: function(index){\r
+               this.setContentType(this.content[index]);\r
+               var desc = {};\r
+               if(this.options.descClassName){\r
+               this.descriptions.each(function(el,i){\r
+                       if(el.hasClass(this.openId)){\r
+                               desc = el.clone();\r
+                       }\r
+               },this);\r
+               }\r
+               //var title = this.content[index].title;\r
+               this.contentToLoad = {\r
+                       title: this.content[index].title || '&nbsp;',\r
+                       //desc: $(this.options.descClassName+this.content[index].id).clone(),\r
+                       desc: desc,\r
+                       number: index+1\r
+               };\r
+       },\r
+       \r
+       close: function(){\r
+               if(this.options.useOverlay){\r
+                       this.overlay.hide();\r
+               }\r
+               if (this.options.showControls) {\r
+                       this.hideControls();\r
+               }\r
+               this.hideContent();\r
+               this.containerEffects.stop();\r
+               this.zoomOut.bind(this).delay(500);\r
+               this.options.onClose();\r
+       },\r
+       \r
+       zoomOut: function(){\r
+               this.containerEffects.start({\r
+                       width: this.openClosePos.width,\r
+                       height: this.openClosePos.height,\r
+                       top: this.openClosePos.top,\r
+                       left: this.openClosePos.left,\r
+                       opacity: 0\r
+               });\r
+               this.reset.bind(this).delay(500);\r
+       },\r
+       \r
+       load: function(index){\r
+               this.box.addClass('MultiBoxLoading');\r
+               this.getContent(index);\r
+               if(this.type == 'image'){\r
+                       var xH = this.contentObj.xH;\r
+                       this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});\r
+                       this.contentObj.xH = xH;\r
+                       /*this.contentObj = new Image();\r
+                       this.contentObj.onload = this.resize.bind(this);\r
+                       this.contentObj.src = this.content[index].href;*/\r
+               }else{\r
+                       this.resize();\r
+               }\r
+       },\r
+       \r
+       resize: function(){\r
+               if (this.options.fixedTop) {\r
+                       var top = this.options.fixedTop;\r
+               }\r
+               else {\r
+                       var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - this.container.getStyle('border').toInt() + window.getScrollTop()) + this.options.offset.y;\r
+               }\r
+               var left = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x;\r
+               if (top < 0) {\r
+                       top = 0\r
+               }\r
+               if (left < 0) {\r
+                       left = 0\r
+               }\r
+               \r
+               this.containerEffects.stop();\r
+               this.containerEffects.start({\r
+                       width: this.contentObj.width,\r
+                       height: Number(this.contentObj.height) + this.contentObj.xH,\r
+                       top: top,\r
+                       left: left,\r
+                       opacity: 1\r
+               });\r
+               this.timer = this.showContent.bind(this).delay(500);\r
+       },\r
+       \r
+       showContent: function(){\r
+               this.box.removeClass('MultiBoxLoading');\r
+               this.removeContent();\r
+               \r
+               this.contentContainer = new Element('div').setProperties({id: 'MultiBoxContentContainer'}).setStyles({opacity: 0, width: this.contentObj.width+'px', height: (Number(this.contentObj.height)+this.contentObj.xH)+'px'}).injectInside(this.box);\r
+               \r
+               if(this.type == 'image'){\r
+                       this.contentObj.injectInside(this.contentContainer);\r
+                       \r
+               }else if(this.type == 'iframe'){\r
+                       new Element('iframe').setProperties({\r
+                               id: 'iFrame'+new Date().getTime(), \r
+                               width: this.contentObj.width,\r
+                               height: this.contentObj.height,\r
+                               src: this.contentObj.url,\r
+                               frameborder: 0,\r
+                               scrolling: 'auto'\r
+                       }).injectInside(this.contentContainer);\r
+                       \r
+               }else if(this.type == 'htmlelement'){\r
+                       this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);\r
+                       \r
+               }else if(this.type == 'ajax'){\r
+                       new Ajax(this.contentObj.url, {\r
+                               method: 'get',\r
+                               update: 'MultiBoxContentContainer',\r
+                               evalScripts: true,\r
+                               autoCancel: true\r
+                       }).request();\r
+                       \r
+               }else{\r
+                       var obj = this.createEmbedObject().injectInside(this.contentContainer);\r
+                       if(this.str != ''){\r
+                               $('MultiBoxMediaObject').innerHTML = this.str;\r
+                       }\r
+               }\r
+               \r
+               this.contentEffects = new Fx.Styles(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});\r
+               this.contentEffects.start({\r
+                       opacity: 1\r
+               });\r
+               \r
+               this.title.setHTML(this.contentToLoad.title);\r
+               this.number.setHTML(this.contentToLoad.number+' of '+this.content.length);\r
+               if (this.options.descClassName) {\r
+                       if (this.description.getFirst()) {\r
+                               this.description.getFirst().remove();\r
+                       }\r
+                       this.contentToLoad.desc.injectInside(this.description).setStyles({\r
+                               display: 'block'\r
+                       });\r
+               }\r
+               //this.removeContent.bind(this).delay(500);\r
+               if (this.options.showControls) {\r
+                       this.timer = this.showControls.bind(this).delay(800);\r
+               }\r
+       },\r
+       \r
+       hideContent: function(){\r
+               this.box.addClass('MultiBoxLoading');\r
+               this.contentEffects.start({\r
+                       opacity: 0\r
+               });\r
+               this.removeContent.bind(this).delay(500);\r
+       },\r
+       \r
+       removeContent: function(){\r
+               if($('MultiBoxMediaObject')){\r
+                       $('MultiBoxMediaObject').empty();\r
+                       $('MultiBoxMediaObject').remove();\r
+               }\r
+               if($('MultiBoxContentContainer')){\r
+                       //$('MultiBoxContentContainer').empty();\r
+                       $('MultiBoxContentContainer').remove(); \r
+               }\r
+       },\r
+       \r
+       showControls: function(){\r
+               this.clicked = false;\r
+               \r
+               if(this.container.getStyle('height') != 'auto'){\r
+                       this.containerDefaults.height = this.container.getStyle('height')\r
+                       this.containerDefaults.backgroundColor = this.options.contentColor;\r
+               }\r
+               \r
+               this.container.setStyles({\r
+                       //'backgroundColor': this.controls.getStyle('backgroundColor'),\r
+                       'height': 'auto'\r
+               });\r
+               \r
+               if(this.contentToLoad.number == 1){\r
+                       this.previousButton.addClass('MultiBoxPreviousDisabled');\r
+               }else{\r
+                       this.previousButton.removeClass('MultiBoxPreviousDisabled');\r
+               }\r
+               if(this.contentToLoad.number == this.content.length){\r
+                       this.nextButton.addClass('MultiBoxNextDisabled');\r
+               }else{\r
+                       this.nextButton.removeClass('MultiBoxNextDisabled');\r
+               }\r
+               \r
+               this.controlEffects.start({'height': this.controls.getStyle('height')});\r
+\r
+       },\r
+       \r
+       hideControls: function(num){\r
+               this.controlEffects.start({'height': 0}).chain(function(){\r
+                       this.container.setStyles(this.containerDefaults);\r
+               }.bind(this));\r
+       },\r
+       \r
+       showThumbnails: function(){\r
+               \r
+       },\r
+       \r
+       next: function(){\r
+               if(this.index < this.content.length-1){\r
+                       this.index++;\r
+                       this.openId = this.content[this.index].getProperty('id');\r
+                       if (this.options.showControls) {\r
+                               this.hideControls();\r
+                       }\r
+                       this.getOpenClosePos(this.content[this.index]);\r
+                       //this.getContent(this.index);\r
+                       this.timer = this.hideContent.bind(this).delay(500);\r
+                       this.timer = this.load.pass(this.index, this).delay(1100);\r
+               }\r
+       },\r
+       \r
+       previous: function(){\r
+               if(this.index > 0){\r
+                       this.index--;\r
+                       this.openId = this.content[this.index].getProperty('id');\r
+                       if (this.options.showControls) {\r
+                               this.hideControls();\r
+                       }\r
+                       this.getOpenClosePos(this.content[this.index]);\r
+                       //this.getContent(this.index);\r
+                       this.timer = this.hideContent.bind(this).delay(500);\r
+                       this.timer = this.load.pass(this.index, this).delay(1000);\r
+               }\r
+       },\r
+       \r
+       createEmbedObject: function(){\r
+               if(this.type == 'flash'){\r
+                       var url = this.contentObj.url;\r
+                       \r
+                       var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});\r
+                       this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '\r
+                       this.str += 'width="'+this.contentObj.width+'" ';\r
+                       this.str += 'height="'+this.contentObj.height+'" ';\r
+                       this.str += 'title="MultiBoxMedia">';\r
+                       this.str += '<param name="movie" value="'+url+'" />'\r
+                       this.str += '<param name="quality" value="high" />';\r
+                       this.str += '<embed src="'+url+'" ';\r
+                       this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';\r
+                       this.str += 'width="'+this.contentObj.width+'" ';\r
+                       this.str += 'height="'+this.contentObj.height+'"></embed>';\r
+                       this.str += '</object>';\r
+                       \r
+               }\r
+               \r
+               if(this.type == 'flashVideo'){\r
+                       //var url = this.contentObj.url.substring(0, this.contentObj.url.lastIndexOf('.'));\r
+                       var url = this.contentObj.url;\r
+                       \r
+                       var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});\r
+                       this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '\r
+                       this.str += 'width="'+this.contentObj.width+'" ';\r
+                       this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'" ';\r
+                       this.str += 'title="MultiBoxMedia">';\r
+                       this.str += '<param name="movie" value="'+this.options.path+'flvplayer.swf" />'\r
+                       this.str += '<param name="quality" value="high" />';\r
+                       this.str += '<param name="salign" value="TL" />';\r
+                       this.str += '<param name="scale" value="noScale" />';\r
+                       this.str += '<param name="FlashVars" value="path='+url+'" />';\r
+                       this.str += '<embed src="'+this.options.path+'flvplayer.swf" ';\r
+                       this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';\r
+                       this.str += 'width="'+this.contentObj.width+'" ';\r
+                       this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'"';\r
+                       this.str += 'salign="TL" ';\r
+                       this.str += 'scale="noScale" ';\r
+                       this.str += 'FlashVars="path='+url+'"';\r
+                       this.str += '></embed>';\r
+                       this.str += '</object>';\r
+                       \r
+               }\r
+               \r
+               if(this.type == 'flashMp3'){\r
+                       var url = this.contentObj.url;\r
+                       \r
+                       var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});\r
+                       this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '\r
+                       this.str += 'width="'+this.contentObj.width+'" ';\r
+                       this.str += 'height="'+this.contentObj.height+'" ';\r
+                       this.str += 'title="MultiBoxMedia">';\r
+                       this.str += '<param name="movie" value="'+this.options.path+'mp3player.swf" />'\r
+                       this.str += '<param name="quality" value="high" />';\r
+                       this.str += '<param name="salign" value="TL" />';\r
+                       this.str += '<param name="scale" value="noScale" />';\r
+                       this.str += '<param name="FlashVars" value="path='+url+'" />';\r
+                       this.str += '<embed src="'+this.options.path+'mp3player.swf" ';\r
+                       this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';\r
+                       this.str += 'width="'+this.contentObj.width+'" ';\r
+                       this.str += 'height="'+this.contentObj.height+'"';\r
+                       this.str += 'salign="TL" ';\r
+                       this.str += 'scale="noScale" ';\r
+                       this.str += 'FlashVars="path='+url+'"';\r
+                       this.str += '></embed>';\r
+                       this.str += '</object>';\r
+               }\r
+               \r
+               if(this.type == 'quicktime'){\r
+                       var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});\r
+                       this.str = '<object  type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';\r
+                       this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';\r
+                       this.str += '<param name="src" value="'+this.contentObj.url+'" />';\r
+                       this.str += '<param name="autoplay" value="true" />';\r
+                       this.str += '<param name="controller" value="true" />';\r
+                       this.str += '<param name="enablejavascript" value="true" />';\r
+                       this.str += '<embed src="'+this.contentObj.url+'" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';\r
+                       this.str += '<object/>';\r
+                       \r
+               }\r
+               \r
+               if(this.type == 'windowsMedia'){\r
+                       var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});\r
+                       this.str = '<object  type="application/x-oleobject" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"';\r
+                       this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';\r
+                       this.str += '<param name="filename" value="'+this.contentObj.url+'" />';\r
+                       this.str += '<param name="Showcontrols" value="true" />';\r
+                       this.str += '<param name="autoStart" value="true" />';\r
+                       this.str += '<embed type="application/x-mplayer2" src="'+this.contentObj.url+'" Showcontrols="true" autoStart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';\r
+                       this.str += '<object/>';\r
+                       \r
+               }\r
+               \r
+               if(this.type == 'real'){\r
+                       var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});\r
+                       this.str = '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"';\r
+                       this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';\r
+                       this.str += '<param name="src" value="'+this.contentObj.url+'" />';\r
+                       this.str += '<param name="controls" value="ImageWindow" />';\r
+                       this.str += '<param name="autostart" value="true" />';\r
+                       this.str += '<embed src="'+this.contentObj.url+'" controls="ImageWindow" autostart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';\r
+                       this.str += '<object/>';\r
+                       \r
+               }\r
+               \r
+               return obj;\r
+       }\r
+       \r
+});\r
+MultiBox.implement(new Options);\r
+MultiBox.implement(new Events);\r
+\r
+\r
+/*************************************************************/\r
+\r
diff --git a/include/overlay.js b/include/overlay.js
new file mode 100644 (file)
index 0000000..432a076
--- /dev/null
@@ -0,0 +1,100 @@
+\r
+/**************************************************************\r
+\r
+       Script          : Overlay\r
+       Version         : 1.2\r
+       Authors         : Samuel birch\r
+       Desc            : Covers the window with a semi-transparent layer.\r
+       Licence         : Open Source MIT Licence\r
+\r
+**************************************************************/\r
+\r
+var Overlay = new Class({\r
+       \r
+       getOptions: function(){\r
+               return {\r
+                       colour: '#000',\r
+                       opacity: 0.7,\r
+                       zIndex: 1,\r
+                       container: document.body,\r
+                       onClick: Class.empty\r
+               };\r
+       },\r
+\r
+       initialize: function(options){\r
+               this.setOptions(this.getOptions(), options);\r
+               \r
+               this.options.container = $(this.options.container);\r
+               \r
+               this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({\r
+                       position: 'absolute',\r
+                       left: '0px',\r
+                       top: '0px',\r
+                       width: '100%',\r
+                       zIndex: this.options.zIndex\r
+               }).injectInside(this.options.container);\r
+               \r
+               this.iframe = new Element('iframe').setProperties({\r
+                       'id': 'OverlayIframe',\r
+                       'name': 'OverlayIframe',\r
+                       'src': 'javascript:void(0);',\r
+                       'frameborder': 1,\r
+                       'scrolling': 'no'\r
+               }).setStyles({\r
+                       'position': 'absolute',\r
+                       'top': 0,\r
+                       'left': 0,\r
+                       'width': '100%',\r
+                       'height': '100%',\r
+                       'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
+                       'opacity': 0,\r
+                       'zIndex': 1\r
+               }).injectInside(this.container);\r
+               \r
+               this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({\r
+                       position: 'absolute',\r
+                       left: '0px',\r
+                       top: '0px',\r
+                       width: '100%',\r
+                       height: '100%',\r
+                       zIndex: 2,\r
+                       backgroundColor: this.options.colour\r
+               }).injectInside(this.container);\r
+               \r
+               this.container.addEvent('click', function(){\r
+                       this.options.onClick();\r
+               }.bind(this));\r
+               \r
+               this.fade = new Fx.Tween(this.container, 'opacity').set(0);\r
+               this.position();\r
+               \r
+               window.addEvent('resize', this.position.bind(this));\r
+       },\r
+       \r
+       position: function(){ \r
+               if(this.options.container == document.body){ \r
+                       var h = window.getScrollHeight()+'px'; \r
+                       this.container.setStyles({top: '0px', height: h}); \r
+               }else{ \r
+                       var myCoords = this.options.container.getCoordinates(); \r
+                       this.container.setStyles({\r
+                               top: myCoords.top+'px', \r
+                               height: myCoords.height+'px', \r
+                               left: myCoords.left+'px', \r
+                               width: myCoords.width+'px'\r
+                       }); \r
+               } \r
+       },\r
+       \r
+       show: function(){\r
+               this.fade.start(0,this.options.opacity);\r
+       },\r
+       \r
+       hide: function(){\r
+               this.fade.start(this.options.opacity,0);\r
+       }\r
+       \r
+});\r
+Overlay.implement(new Options);\r
+\r
+/*************************************************************/\r
index e64f5975b00ec4a8c693ab9abf7fe1ed86782c25..c7d3f46391a0e2a1b1e3271b90f5b208497a9726 100755 (executable)
@@ -568,7 +568,9 @@ sub startindex {
                        -style=>{-src=>$inc."gallery.css"},
                        -script=>[
                                {-src=>$inc."mootools.js"},
                        -style=>{-src=>$inc."gallery.css"},
                        -script=>[
                                {-src=>$inc."mootools.js"},
+                               {-src=>$inc."overlay.js"},
                                {-src=>$inc."urlparser.js"},
                                {-src=>$inc."urlparser.js"},
+                               {-src=>$inc."multibox.js"},
                                {-src=>$inc."slideshow.js"},
                                {-src=>$inc."gallery.js"},
                                {-code=>"var incPrefix='$inc';"}
                                {-src=>$inc."slideshow.js"},
                                {-src=>$inc."gallery.js"},
                                {-code=>"var incPrefix='$inc';"}
@@ -684,7 +686,7 @@ sub img_entry {
                div({-class=>'slidetitle',-id=>$name},
                        a({-href=>".html/$name-info.html",
                                -title=>'Image Info',
                div({-class=>'slidetitle',-id=>$name},
                        a({-href=>".html/$name-info.html",
                                -title=>'Image Info',
-                               -onClick=>"return showIbox('$name');"},
+                               -class=>'infobox'},
                                $title)),"\n",
                div({-class=>'slideimage',-id=>$name},
                        a({-href=>".html/$name-static.html",-title=>$title,
                                $title)),"\n",
                div({-class=>'slideimage',-id=>$name},
                        a({-href=>".html/$name-static.html",-title=>$title,