\r
/**************************************************************\r
\r
- Script : MultiBox\r
- Version : 1.3.1\r
+ Script : multiBox\r
+ Version : 1.3.2\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
+ TODO: 'create' function to open box from flash\r
\r
**************************************************************/\r
\r
-var MultiBox = new Class({\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
+ container: document.body, //this will need to be setup to the box open in relation to this.\r
+ overlay: false, //this will be a reference to an overlay instance. - TODO: implement below.\r
contentColor: '#FFF',\r
showNumbers: true,\r
showControls: true,\r
//showThumbnails: false,\r
//autoPlay: false,\r
- waitDuration: 2000,\r
+ //waitDuration: 2000,\r
descClassName: false,\r
descMinWidth: 400,\r
descMaxWidth: 600,\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
+ _onOpen: $empty,\r
+ _onClose: $empty,\r
+ openFromLink: true\r
+ //relativeToWindow: true\r
};\r
},\r
\r
this.containerDefaults = {};\r
\r
if(this.options.useOverlay){\r
- this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)});\r
+ this.overlay = new overlay({container: this.options.container, onClick:this.close.bind(this)});\r
+ }\r
+ this.overlay = this.options.overlay;\r
+ if(this.overlay){\r
+ this.overlay.setOnClick(this.close.bind(this));\r
}\r
\r
this.content = $$('.'+className);\r
'id': 'multiBoxIframe',\r
'name': 'mulitBoxIframe',\r
'src': 'javascript:void(0);',\r
- 'frameborder': 1,\r
+ 'frameborder': 0,\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
+ }).inject(this.container);\r
+ this.box = new Element('div').addClass('MultiBoxContent').inject(this.container);\r
\r
- this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));\r
+ this.closeButton = new Element('div').addClass('MultiBoxClose').inject(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
+ this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').inject(this.container);\r
+ this.controls = new Element('div').addClass('MultiBoxControls').inject(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
+ this.previousButton = new Element('div').addClass('MultiBoxPrevious').inject(this.controls).addEvent('click', this.previous.bind(this));\r
+ this.nextButton = new Element('div').addClass('MultiBoxNext').inject(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
+ this.title = new Element('div').addClass('MultiBoxTitle').inject(this.controls);\r
+ this.number = new Element('div').addClass('MultiBoxNumber').inject(this.controls);\r
+ this.description = new Element('div').addClass('MultiBoxDescription').inject(this.controls);\r
\r
\r
\r
this.number.setStyle('display', 'none');\r
}\r
\r
- new Element('div').setStyle('clear', 'both').injectInside(this.controls);\r
+ new Element('div').setStyle('clear', 'both').inject(this.controls);\r
\r
this.content.each(function(el,i){\r
el.index = i;\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
+ this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.Sine.easeInOut});\r
+ this.iframeEffects = new Fx.Morph(this.iframe, {duration: 400, transition: Fx.Transitions.Sine.easeInOut});\r
+ this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.Sine.easeInOut});\r
\r
this.reset();\r
},\r
\r
this.contentObj = {};\r
this.contentObj.url = link.href;\r
+ this.contentObj.src = link.href;\r
this.contentObj.xH = 0;\r
\r
if(contentOptions.width){\r
\r
switch(str){\r
case 'jpg':\r
+ case 'image':\r
case 'gif':\r
case 'png':\r
this.type = 'image';\r
this.contentObj.width = this.elementContent.getStyle('width');\r
}\r
\r
- this.contentObj.height = this.elementContent.getSize().size.y;\r
+ this.contentObj.height = this.elementContent.getSize().y;\r
this.elementContent.setStyles({\r
display: 'none',\r
opacity: 1\r
};\r
}\r
}else{\r
+ var border = this.container.getStyle('border').toInt();\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
+ var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+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
+ left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x\r
};\r
}\r
return this.openClosePos;\r
},\r
\r
open: function(el){\r
- \r
- this.options.onOpen();\r
+ this.options._onOpen();\r
\r
this.index = this.content.indexOf(el);\r
\r
this.openId = el.getProperty('id');\r
\r
+ var border = this.container.getStyle('border').toInt();\r
+ \r
if(!this.opened){\r
this.opened = true;\r
\r
- if(this.options.useOverlay){\r
+ if(this.options.overlay){\r
this.overlay.show();\r
}\r
- \r
+\r
this.container.setStyles(this.getOpenClosePos(el));\r
this.container.setStyles({\r
opacity: 0,\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
+ var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y;\r
}\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
+ left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x,\r
opacity: [0, 1]\r
});\r
\r
\r
getContent: function(index){\r
this.setContentType(this.content[index]);\r
- var desc = {};\r
+ var desc = false;\r
if(this.options.descClassName){\r
this.descriptions.each(function(el,i){\r
if(el.hasClass(this.openId)){\r
}\r
},this);\r
}\r
- //var title = this.content[index].title;\r
this.contentToLoad = {\r
title: this.content[index].title || ' ',\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
+ if(this.options.overlay){\r
this.overlay.hide();\r
}\r
if (this.options.showControls) {\r
this.hideControls();\r
}\r
this.hideContent();\r
- this.containerEffects.stop();\r
+ this.containerEffects.cancel();\r
this.zoomOut.bind(this).delay(500);\r
- this.options.onClose();\r
+ this.options._onClose();\r
},\r
\r
zoomOut: function(){\r
+ this.iframeEffects.start({\r
+ width: this.openClosePos.width,\r
+ height: this.openClosePos.height\r
+ });\r
this.containerEffects.start({\r
width: this.openClosePos.width,\r
height: this.openClosePos.height,\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
+ if(this.tempSRC != this.contentObj.src){\r
+ \r
+ var border = this.container.getStyle('border').toInt();\r
+ \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) - border + window.getScrollTop()) + this.options.offset.y;\r
+ }\r
+ var left = ((window.getWidth() / 2) - (this.contentObj.width.toInt() / 2) - border) + this.options.offset.x;\r
+ if (top < 0) {\r
+ top = 0\r
+ }\r
+ if (left < 0) {\r
+ left = 0\r
+ }\r
+ \r
+ this.containerEffects.cancel();\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.iframeEffects.start({\r
+ width: Number(this.contentObj.width) + (border*2),\r
+ height: Number(this.contentObj.height) + this.contentObj.xH + (border*2)\r
+ });\r
+ this.timer = this.showContent.bind(this).delay(500);\r
+ this.tempSRC = this.contentObj.src;\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.tempSRC = '';\r
this.box.removeClass('MultiBoxLoading');\r
this.removeContent();\r
\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
+ new Request.HTML({\r
+ update: $('MultiBoxContentContainer'),\r
autoCancel: true\r
- }).request();\r
+ }).get(this.contentObj.url);\r
\r
}else{\r
var obj = this.createEmbedObject().injectInside(this.contentContainer);\r
}\r
}\r
\r
- this.contentEffects = new Fx.Styles(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});\r
+ this.contentEffects = new Fx.Morph(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
+ this.title.set('html', this.contentToLoad.title);\r
+ this.number.set('html', this.contentToLoad.number+' of '+this.content.length);\r
if (this.options.descClassName) {\r
if (this.description.getFirst()) {\r
- this.description.getFirst().remove();\r
+ this.description.getFirst().destroy();\r
+ }\r
+ if(this.contentToLoad.desc){\r
+ this.contentToLoad.desc.inject(this.description).setStyles({\r
+ display: 'block'\r
+ });\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
removeContent: function(){\r
if($('MultiBoxMediaObject')){\r
$('MultiBoxMediaObject').empty();\r
- $('MultiBoxMediaObject').remove();\r
+ $('MultiBoxMediaObject').destroy();\r
}\r
if($('MultiBoxContentContainer')){\r
//$('MultiBoxContentContainer').empty();\r
- $('MultiBoxContentContainer').remove(); \r
+ $('MultiBoxContentContainer').destroy(); \r
}\r
},\r
\r
this.nextButton.removeClass('MultiBoxNextDisabled');\r
}\r
\r
+ var p = this.box.getCoordinates();\r
+ this.controlsContainer.setStyles({\r
+ 'top': p.height\r
+ });\r
+ \r
this.controlEffects.start({'height': this.controls.getStyle('height')});\r
+ this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()+this.controls.getStyle('height').toInt()});\r
+ \r
+ if(this.options.overlay){\r
+ this.options.overlay.position();\r
+ }\r
\r
},\r
\r
hideControls: function(num){\r
+ this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()-this.controls.getStyle('height').toInt()});\r
this.controlEffects.start({'height': 0}).chain(function(){\r
this.container.setStyles(this.containerDefaults);\r
}.bind(this));\r
}\r
\r
});\r
-MultiBox.implement(new Options);\r
-MultiBox.implement(new Events);\r
+multiBox.implement(new Options);\r
+multiBox.implement(new Events);\r
\r
\r
/*************************************************************/\r
projects / mkgallery.git / blobdiff