Skip to content

Fixing WordPress Multibox Plugin

  • by

The WordPress Multibox Plugin is another great plugin for WordPress. We don’t use it here on the official iSynergy Webdesign blog, but we do use it in a few other implementations for clients. It’s great because, unlike most lightbox effects, it works with things other than images. It can add overlay effects to videos, pdfs, and any other web-based content.

However, there’s a minor problem with the multibox.js script. It appears to break within Firefox when the overlay effect is placed on only 1 object on the page (which happens quite often in individual posts). It has to do with the playNextButton and playPreviousButton objects that show up in slideshow mode. When there’s only 1 object with the overlay effect, the two buttons become undefined and end up breaking the overlay script.

To fix this, we’ll have to modify the js file within the plugin. Depending on which mootools version you’re using for the plugin, go into the plugin folder and navigate to either mtv111 (for mootools 1.11) or mtv120 (for mootools 1.2) and open either the multibox.js (for mootools 1.11) or multibox-1.3.1.js(for mootools 1.2).

For multibox.js, find line 95. For multibox-1.3.1.js, find line 97. Note the following lines of code:

if(this.options.slideshow) {
	this.playPreviousButton = new Element('div').addClass('MultiBoxPlayPrevious').injectInside(this.controls).addEvent('click', this.playprevious.bind(this));
	this.playNextButton = new Element('div').addClass('MultiBoxPlayNext').injectInside(this.controls).addEvent('click', this.playnext.bind(this));
}

Essentially, the playPreviousButton and playNextButton elements aren’t created unless the slideshow option is on. This is the culprit that causes the undefined that occurs later in the script.

Now to actually fix this problem, for multibox.js, find line 115, for multibox-1.3.1.js, find line 118. The lines correspond to the following code:

this.playNextButton.setStyle('display', 'none');
this.playPreviousButton.setStyle('display', 'none');

To fix the problem, we’ll just nest the above code within an if statement that is the same as the one used to create the elements to begin with. Our final bit of code should look like this:

if(this.options.slideshow) {
	this.playNextButton.setStyle('display', 'none');
	this.playPreviousButton.setStyle('display', 'none');
}

So essentially, if it’s not in slideshow mode, we won’t create the elements and we won’t call the elements later, either. That’s it.