From: Eugene Crosser Date: Tue, 19 Aug 2008 07:44:15 +0000 (+0000) Subject: pull phatfusion scripts that actually work with mootools 1.2 X-Git-Tag: 2.00~51 X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=commitdiff_plain;h=481af6c9567c2f71575e7e3464103937d6025ce4 pull phatfusion scripts that actually work with mootools 1.2 --- diff --git a/include/gallery.css b/include/gallery.css index 93fea0d..e5c5e82 100644 --- a/include/gallery.css +++ b/include/gallery.css @@ -31,25 +31,6 @@ table.slide td { vertical-align: middle; } -div.ibox { - background-color: #ffffc0; - border: 1px solid black; - margin: 0px; - padding: 0px; - font-size: 10px; - display: none; - z-index: 1000; - position: absolute; -} -div.iboxtitle { - background-color: blue; - margin: 0px; - padding: 0.5ex; -} -div.iboxtitle * { - color: white; -} - table.ipage { background-color: #ffffc0; border: 1px solid black; diff --git a/include/gallery.js b/include/gallery.js index f85f19a..d0f9760 100644 --- a/include/gallery.js +++ b/include/gallery.js @@ -10,13 +10,13 @@ Slideshow */ -var ShowWindow = new Class({ +var showWindow = new Class({ getOptions: function(){ return { zIndex: 2, container: document.body, - onClick: Class.empty + onClick: $empty, }; }, @@ -69,7 +69,7 @@ var ShowWindow = new Class({ this.div.setStyles({display: 'none'}); } }); -ShowWindow.implement(new Options); +showWindow.implement(new Options); /* Make overlay window and start slideshow */ function run_slideshow(startid) { @@ -132,10 +132,10 @@ function init_gallery() { openFromLink: false, descClassName: 'infoboxdesc', } - ibox = new MultiBox('infobox', iboxparams) + ibox = new multiBox('infobox', iboxparams) var winparms = {} - showwin = new ShowWindow('slideshowWindow',winparms) + showwin = new showWindow('slideshowWindow',winparms) var showparms = { wait: 3000, @@ -145,7 +145,7 @@ function init_gallery() { thumbnails: true, onClick: function(i){alert(i)} } - show = new SlideShow('slideshowContainer','slideshowThumbnail',showparms) + show = new slideShow('slideshowContainer','slideshowThumbnail',showparms) parsedurl = parseUrl(document.URL) // alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) diff --git a/include/multibox.js b/include/multibox.js index fd2803b..2b8a8c7 100644 --- a/include/multibox.js +++ b/include/multibox.js @@ -1,28 +1,30 @@ /************************************************************** - Script : MultiBox - Version : 1.3.1 + Script : multiBox + Version : 1.3.2 Authors : Samuel Birch Desc : Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe Licence : Open Source MIT Licence + + TODO: 'create' function to open box from flash **************************************************************/ -var MultiBox = new Class({ +var multiBox = new Class({ getOptions: function(){ return { initialWidth: 250, initialHeight: 250, - container: document.body, - useOverlay: false, + container: document.body, //this will need to be setup to the box open in relation to this. + overlay: false, //this will be a reference to an overlay instance. - TODO: implement below. contentColor: '#FFF', showNumbers: true, showControls: true, //showThumbnails: false, //autoPlay: false, - waitDuration: 2000, + //waitDuration: 2000, descClassName: false, descMinWidth: 400, descMaxWidth: 600, @@ -31,10 +33,10 @@ var MultiBox = new Class({ offset: {x:0, y:0}, fixedTop: false, path: 'files/', - onOpen: $empty, - onClose: $empty, - openFromLink: true, - relativeToWindow: true + _onOpen: $empty, + _onClose: $empty, + openFromLink: true + //relativeToWindow: true }; }, @@ -50,7 +52,11 @@ var MultiBox = new Class({ this.containerDefaults = {}; if(this.options.useOverlay){ - this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)}); + this.overlay = new overlay({container: this.options.container, onClick:this.close.bind(this)}); + } + this.overlay = this.options.overlay; + if(this.overlay){ + this.overlay.setOnClick(this.close.bind(this)); } this.content = $$('.'+className); @@ -66,30 +72,28 @@ var MultiBox = new Class({ 'id': 'multiBoxIframe', 'name': 'mulitBoxIframe', 'src': 'javascript:void(0);', - 'frameborder': 1, + 'frameborder': 0, 'scrolling': 'no' }).setStyles({ 'position': 'absolute', 'top': -20, 'left': -20, - 'width': '115%', - 'height': '115%', 'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)', 'opacity': 0 - }).injectInside(this.container); - this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container); + }).inject(this.container); + this.box = new Element('div').addClass('MultiBoxContent').inject(this.container); - this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this)); + this.closeButton = new Element('div').addClass('MultiBoxClose').inject(this.container).addEvent('click', this.close.bind(this)); - this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').injectInside(this.container); - this.controls = new Element('div').addClass('MultiBoxControls').injectInside(this.controlsContainer); + this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').inject(this.container); + this.controls = new Element('div').addClass('MultiBoxControls').inject(this.controlsContainer); - this.previousButton = new Element('div').addClass('MultiBoxPrevious').injectInside(this.controls).addEvent('click', this.previous.bind(this)); - this.nextButton = new Element('div').addClass('MultiBoxNext').injectInside(this.controls).addEvent('click', this.next.bind(this)); + this.previousButton = new Element('div').addClass('MultiBoxPrevious').inject(this.controls).addEvent('click', this.previous.bind(this)); + this.nextButton = new Element('div').addClass('MultiBoxNext').inject(this.controls).addEvent('click', this.next.bind(this)); - this.title = new Element('div').addClass('MultiBoxTitle').injectInside(this.controls); - this.number = new Element('div').addClass('MultiBoxNumber').injectInside(this.controls); - this.description = new Element('div').addClass('MultiBoxDescription').injectInside(this.controls); + this.title = new Element('div').addClass('MultiBoxTitle').inject(this.controls); + this.number = new Element('div').addClass('MultiBoxNumber').inject(this.controls); + this.description = new Element('div').addClass('MultiBoxDescription').inject(this.controls); @@ -105,7 +109,7 @@ var MultiBox = new Class({ this.number.setStyle('display', 'none'); } - new Element('div').setStyle('clear', 'both').injectInside(this.controls); + new Element('div').setStyle('clear', 'both').inject(this.controls); this.content.each(function(el,i){ el.index = i; @@ -119,8 +123,9 @@ var MultiBox = new Class({ } }, this); - this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.sineInOut}); - this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut}); + this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.Sine.easeInOut}); + this.iframeEffects = new Fx.Morph(this.iframe, {duration: 400, transition: Fx.Transitions.Sine.easeInOut}); + this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300, transition: Fx.Transitions.Sine.easeInOut}); this.reset(); }, @@ -142,6 +147,7 @@ var MultiBox = new Class({ this.contentObj = {}; this.contentObj.url = link.href; + this.contentObj.src = link.href; this.contentObj.xH = 0; if(contentOptions.width){ @@ -163,6 +169,7 @@ var MultiBox = new Class({ switch(str){ case 'jpg': + case 'image': case 'gif': case 'png': this.type = 'image'; @@ -202,7 +209,7 @@ var MultiBox = new Class({ this.contentObj.width = this.elementContent.getStyle('width'); } - this.contentObj.height = this.elementContent.getSize().size.y; + this.contentObj.height = this.elementContent.getSize().y; this.elementContent.setStyles({ display: 'none', opacity: 1 @@ -268,36 +275,39 @@ var MultiBox = new Class({ }; } }else{ + var border = this.container.getStyle('border').toInt(); + if(this.options.fixedTop){ var top = this.options.fixedTop; }else{ - var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y; + var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y; } this.openClosePos = { width: this.options.initialWidth, height: this.options.initialHeight, top: top, - left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x + left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x }; } return this.openClosePos; }, open: function(el){ - - this.options.onOpen(); + this.options._onOpen(); this.index = this.content.indexOf(el); this.openId = el.getProperty('id'); + var border = this.container.getStyle('border').toInt(); + if(!this.opened){ this.opened = true; - if(this.options.useOverlay){ + if(this.options.overlay){ this.overlay.show(); } - + this.container.setStyles(this.getOpenClosePos(el)); this.container.setStyles({ opacity: 0, @@ -307,14 +317,15 @@ var MultiBox = new Class({ if(this.options.fixedTop){ var top = this.options.fixedTop; }else{ - var top = ((window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt())+this.options.offset.y; + var top = ((window.getHeight()/2)-(this.options.initialHeight/2) - border)+this.options.offset.y; } + this.containerEffects.start({ width: this.options.initialWidth, height: this.options.initialHeight, top: top, - left: ((window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())+this.options.offset.x, + left: ((window.getWidth()/2)-(this.options.initialWidth/2)-border)+this.options.offset.x, opacity: [0, 1] }); @@ -334,7 +345,7 @@ var MultiBox = new Class({ getContent: function(index){ this.setContentType(this.content[index]); - var desc = {}; + var desc = false; if(this.options.descClassName){ this.descriptions.each(function(el,i){ if(el.hasClass(this.openId)){ @@ -342,29 +353,31 @@ var MultiBox = new Class({ } },this); } - //var title = this.content[index].title; this.contentToLoad = { title: this.content[index].title || ' ', - //desc: $(this.options.descClassName+this.content[index].id).clone(), desc: desc, number: index+1 }; }, close: function(){ - if(this.options.useOverlay){ + if(this.options.overlay){ this.overlay.hide(); } if (this.options.showControls) { this.hideControls(); } this.hideContent(); - this.containerEffects.stop(); + this.containerEffects.cancel(); this.zoomOut.bind(this).delay(500); - this.options.onClose(); + this.options._onClose(); }, zoomOut: function(){ + this.iframeEffects.start({ + width: this.openClosePos.width, + height: this.openClosePos.height + }); this.containerEffects.start({ width: this.openClosePos.width, height: this.openClosePos.height, @@ -382,41 +395,49 @@ var MultiBox = new Class({ var xH = this.contentObj.xH; this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)}); this.contentObj.xH = xH; - /*this.contentObj = new Image(); - this.contentObj.onload = this.resize.bind(this); - this.contentObj.src = this.content[index].href;*/ }else{ this.resize(); } }, resize: function(){ - if (this.options.fixedTop) { - var top = this.options.fixedTop; - } - else { - var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - this.container.getStyle('border').toInt() + window.getScrollTop()) + this.options.offset.y; - } - var left = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle('border').toInt()) + this.options.offset.x; - if (top < 0) { - top = 0 - } - if (left < 0) { - left = 0 + if(this.tempSRC != this.contentObj.src){ + + var border = this.container.getStyle('border').toInt(); + + if (this.options.fixedTop) { + var top = this.options.fixedTop; + } + else { + var top = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - border + window.getScrollTop()) + this.options.offset.y; + } + var left = ((window.getWidth() / 2) - (this.contentObj.width.toInt() / 2) - border) + this.options.offset.x; + if (top < 0) { + top = 0 + } + if (left < 0) { + left = 0 + } + + this.containerEffects.cancel(); + this.containerEffects.start({ + width: this.contentObj.width, + height: Number(this.contentObj.height) + this.contentObj.xH, + top: top, + left: left, + opacity: 1 + }); + this.iframeEffects.start({ + width: Number(this.contentObj.width) + (border*2), + height: Number(this.contentObj.height) + this.contentObj.xH + (border*2) + }); + this.timer = this.showContent.bind(this).delay(500); + this.tempSRC = this.contentObj.src; } - - this.containerEffects.stop(); - this.containerEffects.start({ - width: this.contentObj.width, - height: Number(this.contentObj.height) + this.contentObj.xH, - top: top, - left: left, - opacity: 1 - }); - this.timer = this.showContent.bind(this).delay(500); }, showContent: function(){ + this.tempSRC = ''; this.box.removeClass('MultiBoxLoading'); this.removeContent(); @@ -439,12 +460,10 @@ var MultiBox = new Class({ this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer); }else if(this.type == 'ajax'){ - new Ajax(this.contentObj.url, { - method: 'get', - update: 'MultiBoxContentContainer', - evalScripts: true, + new Request.HTML({ + update: $('MultiBoxContentContainer'), autoCancel: true - }).request(); + }).get(this.contentObj.url); }else{ var obj = this.createEmbedObject().injectInside(this.contentContainer); @@ -458,15 +477,17 @@ var MultiBox = new Class({ opacity: 1 }); - this.title.setHTML(this.contentToLoad.title); - this.number.setHTML(this.contentToLoad.number+' of '+this.content.length); + this.title.set('html', this.contentToLoad.title); + this.number.set('html', this.contentToLoad.number+' of '+this.content.length); if (this.options.descClassName) { if (this.description.getFirst()) { - this.description.getFirst().remove(); + this.description.getFirst().destroy(); + } + if(this.contentToLoad.desc){ + this.contentToLoad.desc.inject(this.description).setStyles({ + display: 'block' + }); } - this.contentToLoad.desc.injectInside(this.description).setStyles({ - display: 'block' - }); } //this.removeContent.bind(this).delay(500); if (this.options.showControls) { @@ -485,11 +506,11 @@ var MultiBox = new Class({ removeContent: function(){ if($('MultiBoxMediaObject')){ $('MultiBoxMediaObject').empty(); - $('MultiBoxMediaObject').remove(); + $('MultiBoxMediaObject').destroy(); } if($('MultiBoxContentContainer')){ //$('MultiBoxContentContainer').empty(); - $('MultiBoxContentContainer').remove(); + $('MultiBoxContentContainer').destroy(); } }, @@ -517,11 +538,22 @@ var MultiBox = new Class({ this.nextButton.removeClass('MultiBoxNextDisabled'); } + var p = this.box.getCoordinates(); + this.controlsContainer.setStyles({ + 'top': p.height + }); + this.controlEffects.start({'height': this.controls.getStyle('height')}); + this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()+this.controls.getStyle('height').toInt()}); + + if(this.options.overlay){ + this.options.overlay.position(); + } }, hideControls: function(num){ + this.iframeEffects.start({'height': this.iframe.getStyle('height').toInt()-this.controls.getStyle('height').toInt()}); this.controlEffects.start({'height': 0}).chain(function(){ this.container.setStyles(this.containerDefaults); }.bind(this)); @@ -669,8 +701,8 @@ var MultiBox = new Class({ } }); -MultiBox.implement(new Options); -MultiBox.implement(new Events); +multiBox.implement(new Options); +multiBox.implement(new Events); /*************************************************************/ diff --git a/include/overlay.js b/include/overlay.js index e5d2f3f..078b75a 100644 --- a/include/overlay.js +++ b/include/overlay.js @@ -1,7 +1,7 @@ /************************************************************** - Script : Overlay + Script : overlay Version : 1.2 Authors : Samuel birch Desc : Covers the window with a semi-transparent layer. @@ -9,7 +9,7 @@ **************************************************************/ -var Overlay = new Class({ +var overlay = new Class({ getOptions: function(){ return { @@ -17,7 +17,7 @@ var Overlay = new Class({ opacity: 0.7, zIndex: 1, container: document.body, - onClick: Class.empty + _onClick: $empty }; }, @@ -38,7 +38,7 @@ var Overlay = new Class({ 'id': 'OverlayIframe', 'name': 'OverlayIframe', 'src': 'javascript:void(0);', - 'frameborder': 1, + 'frameborder': 0, 'scrolling': 'no' }).setStyles({ 'position': 'absolute', @@ -61,16 +61,23 @@ var Overlay = new Class({ backgroundColor: this.options.colour }).injectInside(this.container); - this.container.addEvent('click', function(){ - this.options.onClick(); - }.bind(this)); + if(this.options._onClick){ + this.container.addEvent('click', function(){ + this.options._onClick.call(this) + }.bind(this)); + } - this.fade = new Fx.Tween(this.container).set('opacity', 0); + //this.fade = new Fx.Tween(this.container).set('opacity', 0); + this.container.fade('hide'); this.position(); window.addEvent('resize', this.position.bind(this)); }, + setOnClick: function(func){ + this.container.addEvent('click', func); + }, + position: function(){ if(this.options.container == document.body){ var h = window.getScrollHeight()+'px'; @@ -87,14 +94,16 @@ var Overlay = new Class({ }, show: function(){ - this.fade.start(0,this.options.opacity); + //this.fade.start(0,this.options.opacity); + this.container.fade(this.options.opacity); }, hide: function(){ - this.fade.start(this.options.opacity,0); + //this.fade.start(this.options.opacity,0); + this.container.fade('out'); } }); -Overlay.implement(new Options); +overlay.implement(new Options); /*************************************************************/ diff --git a/include/slideshow.js b/include/slideshow.js index cc312d9..7f2e973 100644 --- a/include/slideshow.js +++ b/include/slideshow.js @@ -1,15 +1,15 @@ /************************************************************** - Script : SlideShow + Script : slideShow Version : 1.3 Authors : Samuel Birch - Desc : + Desc : transitions between images Licence : Open Source MIT Licence **************************************************************/ -var SlideShow = new Class({ +var slideShow = new Class({ getOptions: function(){ return { @@ -17,12 +17,12 @@ var SlideShow = new Class({ duration: 2000, transition: Fx.Transitions.linear, direction: 'right', //top|right|bottom|left|random - color: false, + //color: false, wait: 5000, - loop: false, + loop: true, thumbnails: false, thumbnailCls: 'outline', - backgroundSlider: false, + backgroundSlider: false, //change to be an instance. loadingCls: 'loading', onClick: false }; @@ -156,7 +156,8 @@ var SlideShow = new Class({ }); var img = this.newImage.getElement('img'); if(img){ - img.replaceWith(this.imageObj.clone()); + this.imageObj.clone().replaces(img); + //img.replaces(this.imageObj.clone()); }else{ var obj = this.imageObj.clone(); obj.injectInside(this.newImage); @@ -216,6 +217,7 @@ var SlideShow = new Class({ if(doNext){ this.cloneImage(); $clear(this.timer); + /* console.log(this.image) */ if(this.image < this.images.length-1){ if(wait){ this.wait(); @@ -249,7 +251,8 @@ var SlideShow = new Class({ cloneImage: function(){ var img = this.oldImage.getElement('img'); if(img){ - img.replaceWith(this.imageObj.clone()); + this.imageObj.clone().replaces(img); + //img.replaces(this.imageObj.clone()); }else{ var obj = this.imageObj.clone(); obj.injectInside(this.oldImage); @@ -268,7 +271,7 @@ var SlideShow = new Class({ effect: function(){ this.animating = true; - this.effectObj = this.newImage.effects({ + this.effectObj = new Fx.Morph(this.newImage, { duration: this.options.duration, transition: this.options.transition }); @@ -355,10 +358,9 @@ var SlideShow = new Class({ }, wipe: function(){ - this.oldImage.effects({ + this.newImage.morph({ duration: this.options.duration, - transition: this.options.transition - }).start({ + transition: this.options.transition, top: [0,this.topOut], left: [0, this.leftOut] }) @@ -390,8 +392,8 @@ var SlideShow = new Class({ } }); -SlideShow.implement(new Options); -SlideShow.implement(new Events); +slideShow.implement(new Options); +slideShow.implement(new Events); /*************************************************************/