GrinGod [dot] Com

In my previous article on the moo.box I showed you how to close the lightbox using javscript, rather than using the link method given in the Moo.box documentation.

This time I’m looking at how to open the lightbox using javascript rather than using the method given in the documentation. This again relies on creating an instance of the moo.box in the same way as in the previous artivle:

var myMoobox;
window.onload=function() {
myMoobox = new moobox({
closeText: "Want to close this? Click here",
ajaxLayout: "<div id='ajax'>%CONTENT%</div>",
imageLayout: "<img src='%SRC%' title='%TITLE%'/>"
});
}

Once you have created an instance of the moo.box you will be able to call the doEvent() code on it. Unlike in the last article, in order to open the moo.box we need to pass in an event “open”, a url to open to opened in the moo.box and a title.

Exampple:
<a href="javascript:myMoobox.doEvent('open','http://www.example.com','Example Lightbox');">Test moobox link</a>

Another example (as asked for in the Moo.fx forums) for opening on an ajax request completion:
new ajax('postbackUrl', {update:$('someid'), onComplete:myFunction});
function myFunction(request){
myMoobox.doEvent('open','http://www.example.com','Example Lightbox');
}

Thats all there is to it. If you wish you can also call the insert event, passing in the same arguments as for open, which will load the new url into the open moo.box without closing the moo.box.

Trackback URI | Comments RSS