Multibox with Mootools 1.2b?

[eyecache]

1.)Has anyone managed to get this working with Mootools 1.2b?

2.)If no, is there an official version in progress that will work with 1.2b?

Thanks!

[Samuel]

An official version will be released when mootools 1.2 comes out of beta.

until then...

here is what you need to do to make the MultiBox script compatibile with mootools 1.2 beta 2.
I'm not releasing these updates in a script as i want to rewrite it when 1.2 gets released, so i can use all the nice new features.

Replace the following:


- Fx.Styles with Fx.Morph
- transition: Fx.Transitions.sineInOut with transition: Fx.Transitions.Sine.easeInOut
- Class.empty with new Class()
- this.containerEffects.stop() with this.containerEffects.cancel()

It might also be necessary to modify 3 lines in overlay.js in case you want to use this option:

line 20: Class.empty -> new Class()
line 68: Fx.Style -> Fx.Tween
line 76: window.getScrollHeight() -> document.getScrollSize().x

[ronnie]

Hi,

I followed your instructions using the multibox with mootools 1.2 but had no luck.
The box opens, but after closing it you cannot open another multiobox on the page?

Any hints?

Thanks in advance...

Cheers

[larjohns]

Whoohoo, 1.2! Uh, dang, 1.2, whatddawedo?

besides the changes mentioned above...

IN MULTIBOX DO THIS:
(less than is the new file and greater than is the old file, the numbers are line numbers in each file)

~/w/i/icglink.net/jj/jphat $ diff multibox1.2.js multibox.js
34,35c34,35
< onOpen: new Class(),
< onClose: new Class(),
---
> onOpen: Class.empty,
> onClose: Class.empty,
64,65c64
< //this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
< this.container = new Element('div').addClass('MultiBoxContainer').inject(this.options.container,'inside');
---
> this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
80,82c79,80
< //}).injectInside(this.container);
< }).inject(this.container,'inside');
< this.box = new Element('div').addClass('MultiBoxContent').inject(this.container,'inside');
---
> }).injectInside(this.container);
> this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);
84c82
< this.closeButton = new Element('div').addClass('MultiBoxClose').inject(this.container,'inside').addEvent('click', this.close.bind(this));
---
> this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));
86,87c84,85
< this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').inject(this.container,'inside');
< this.controls = new Element('div').addClass('MultiBoxControls').inject(this.controlsContainer,'inside');
---
> this.controlsContainer = new Element('div').addClass('MultiBoxControlsContainer').injectInside(this.container);
> this.controls = new Element('div').addClass('MultiBoxControls').injectInside(this.controlsContainer);
89,90c87,88
< this.previousButton = new Element('div').addClass('MultiBoxPrevious').inject(this.controls,'inside').addEvent('click', this.previous.bind(this));
< this.nextButton = new Element('div').addClass('MultiBoxNext').inject(this.controls,'inside').addEvent('click', this.next.bind(this));
---
> 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));
92,94c90,92
< this.title = new Element('div').addClass('MultiBoxTitle').inject(this.controls,'inside');
< this.number = new Element('div').addClass('MultiBoxNumber').inject(this.controls,'inside');
< this.description = new Element('div').addClass('MultiBoxDescription').inject(this.controls,'inside');
---
> 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);
110c108
< new Element('div').setStyle('clear', 'both').inject(this.controls,'inside');
---
> new Element('div').setStyle('clear', 'both').injectInside(this.controls);
113,114d110
< //
< // alert(el.getProperty('id'));
117d112
< //new Event(e).stop();
127,128c122,123
< this.containerEffects = new Fx.Morph(this.container, {duration: 400});
< this.controlEffects = new Fx.Morph(this.controlsContainer, {duration: 300});
---
> this.containerEffects = new Fx.Styles(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});
> this.controlEffects = new Fx.Styles(this.controlsContainer, {duration: 300, transition: Fx.Transitions.sineInOut});
293c288
< //this.options.onOpen();
---
> this.options.onOpen();
367c362
< this.containerEffects.cancel();
---
> this.containerEffects.stop();
413c408
< this.containerEffects.cancel();
---
> this.containerEffects.stop();
428c423
< 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'}).inject(this.box,'inside');
---
> 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);
431c426
< this.contentObj.inject(this.contentContainer,'inside');
---
> this.contentObj.injectInside(this.contentContainer);
441c436
< }).inject(this.contentContainer,'inside');
---
> }).injectInside(this.contentContainer);
444c439
< this.elementContent.clone().setStyle('display','block').inject(this.contentContainer,'inside');
---
> this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);
455c450
< var obj = this.createEmbedObject().inject(this.contentContainer,'inside');
---
> var obj = this.createEmbedObject().injectInside(this.contentContainer);
461c456
< this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500});
---
> this.contentEffects = new Fx.Styles(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});
466,469c461,462
< //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);
---
> this.title.setHTML(this.contentToLoad.title);
> this.number.setHTML(this.contentToLoad.number+' of '+this.content.length);
472c465
< this.description.getFirst().destroy();
---
> this.description.getFirst().remove();
474c467
< this.contentToLoad.desc.inject(this.description,'inside').setStyles({
---
> this.contentToLoad.desc.injectInside(this.description).setStyles({
494,496c487,488
< //$('MultiBoxMediaObject').empty();
< //$('MultiBoxMediaObject').remove();
< $('MultiBoxMediaObject').destroy();
---
> $('MultiBoxMediaObject').empty();
> $('MultiBoxMediaObject').remove();
500,501c492
< //$('MultiBoxContentContainer').remove();
< $('MultiBoxContentContainer').destroy();
---
> $('MultiBoxContentContainer').remove();


AND IN OVERLAY.JS DO THIS:


~/w/i/icglink.net/jj/jphat $ diff overlay1.2.js overlay.js
20c20
< onClick: new Class()
---
> onClick: Class.empty
34d33
< visibility: 'hidden',
69c68
< this.fade = new Fx.Morph(this.container, 'opacity').set(0);
---
> this.fade = new Fx.Style(this.container, 'opacity').set(0);
91c90
< this.fade.start({'opacity':[0,this.options.opacity],'visibility':'visible'});
---
> this.fade.start(0,this.options.opacity);
95c94
< this.fade.start({'opacity':[this.options.opacity,0],'visibility':'hidden'});
---
> this.fade.start(this.options.opacity,0);

And once again, phat is phat, phat, phat (1.11 in 1.2 workaround mode phat anyway, with the new 1.2 juju like this.container.fade('toggle') we could probably drop a few dozen lines, no?).

jj

[ronnie]

Neat!

Thanks a lot!
I will try it out asap.


Cheers



<<update>> Works like a charm -> even Opera 9.5 likes the little phatty now.
Learned a lot going through the changes.
Thanks for your support!

[nelwa]

umm, not to sound to demanding or something, but mootools 1.2 has been out for more than a week now, and still no multibox with mootools 1.2? When can we expect the new release?

[wakextreme]

I'd love to get an update as well. I need this for a project and don't want to rewrite on my own if a new version is in the works and on the way soon. Great work!

[enseignement]

Hello Samuel,

Would it be possible to add, like in lightwindow or other scripts like this, a fullscreen mode for the iframe feature with the 1.2 mootools version ?

Thanks for your answer...

Benjamin

[Severance]

hello all

anyone can post the multibox.js and overlay.js with the changes mentioned above ?

thanks !

[ghazal]

Hi,
I posted a work version of Multibox for 1.2 here:
http://ghazalp.byethost13.com/MULTIBOXE ... tibox.html
updated with the help of larjohns changes

There are still many pbs.

* Specially a firebug error on line 173, when clicking the html link:

this.contentObj.height = this.elementContent.getSize().size.y;

*large images not showing when clicking on the thumbnails

*a pb with iframe also

I am stuck.
Hope someone can help.