hacking and gonzo since 2000

Initializing objects in GreyBox

GreyBox is built with extendability in mind and one can pass an options object to customize the behavior of GreyBox. In this little blog post I will show how it works.

Let's say we want a GB_show method that does not show the loading screen. The standard GB_show looks like this:

GB_show = function(caption, url, /* optional */ height, width, callback_fn) {
    var options = {
        caption: caption,
        height: height || 500,
        width: width || 500,
        fullscreen: false,
        callback_fn: callback_fn
    }
    var win = new GB_Window(options);
    return win.show(url);
}

The important aspects, in the above code, are:

options: An object that holds our options.
new GB_Window(options): GB_Window is a class that extends the base GreyBox class. It customizes the class so windows are shown.

Now if one opens greybox/base/base.js one will find the GreyBox class, its init function sets the default behavior, it looks like this:

init: function(options) {
        this.type = "page";
        this.overlay_click_close = false;
        this.salt = 0;
        this.root_dir = GB_ROOT_DIR;
        this.callback_fns = [];
        this.reload_on_close = false;
        this.src_loader = this.root_dir + 'loader_frame.html';
        this.show_loading = true;
        AJS.update(this, options);
    },

Notice this.show_loading = true, we want to change that to false. So we simply create a new function called GB_myShow:

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
    var options = {
        caption: caption,
        height: height || 500,
        width: width || 500,
        fullscreen: false,
        show_loading: false,
        callback_fn: callback_fn
    }
    var win = new GB_Window(options);
    return win.show(url);
}

And that's it, now one can do following:

<a href="http://google.com/" onclick="return GB_myShow('Google', this.href)">Visit Google</a>

Google will be shown instantly, i.e. with out the "Loading..." screen.

Scroll down to the bottom of GryeBox examples page to see a demo.

Code · JavaScript · Tips • 29. Dec 2006