Aug 24 2006

Opening Moo.box From Javascript

Published by at 5:27 pm under Programming

This is an old article and the information contained within it may be out of date, not reflect my current views and/or contain broken links. If you feel this article is still valid and requires updating, you can use the contact form to let me know. However, I make no guarantee that it will get updated.

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.

No responses yet