CeraBox - Lightbox for Mootools 1.4

CeraBox is the alternative Lightbox build on MooTools 1.4, inspired by Fancybox.net.
A JavaScript plugin used to display larger images (or other objects) without leaving the page using modal dialogs.

Check out the official page for more info » Download CeraBox 1.3.8

Advanced usage

Already know what the CeraBox is all about and just need some advanced usage examples? Then you came to the right place.

Iframe onload test

We were asked if it was possible to get an event fired when an iframe was loaded and ready to be used. The problem was that the size of the iframe was still 1x1 when onload is fired.

It seems that the onload event of the MooTools element IFrame is fired after the actual onload on the page. Because we cant change that we have to be creative, so I created an onLoad function on the page that will be loaded. And added an onAnimationEnd and onChange event to fire the function.

Example 1 Example 2 

window.addEvent('domready',function(){
	$$('a.onload-test').cerabox({
		'events': {
			'onAnimationEnd': function(){
				try {
					$('cerabox').getElement('iframe').contentWindow.onLoad();
				}catch(err){}
			},
			'onChange': function(){
				try {
					$('cerabox').getElement('iframe').contentWindow.onLoad();
				}catch(err){}
			}
		}
	});
});

Script from iframe <head>

var onLoad = function(){
	$('frame-size').set(
		'text',
		window.getSize().x + 'x' + window.getSize().y
	);
};