You surely know these kinds of boxes: after clicking on a link or a thumbnail an expandable box with some eye catching content is shown above your page.
Joomla! 1.5 comes with mootools 1.11 javascript library. Joomla! even has modal.js as a default expandable box. It is de facto digitarald.de Squeezbox ver 1.0 for mootools 1.1. In this version it is too simple for my taste: it displays - if I remember well - only images. I want more...
Phatfusion.net Multibox can do more:
• images (jpg, gif, png),
• flash (swf),
• video (flv, mov, wmv, rv, rm, rvb),
• mp3,
• html as well as single Joomla! articles and
• iframe.
And you can easily create whole Multibox galleries as well.
Uncompressed Multibox is some 22kB that is twice big as built in modal.js is. After compression with very useful yuicompressor you will get 17kB. Not bad with respect to what you can do with it. And you can get rid of many many specialized Joomla! extensions.
How to include Multibox into your pages?
It is terribly simple.
If you intend to use Multibox intensively then the best way is to include it into your template. From developers pages and example page you will easily learn that you will have to: A) inject some js and css files into the Joomla! <head> section, B) initialize object (again into the <head>) by a javascript and C) use it.
If you intend to use Multibox only from time to time it is better to include necessary js and css files only when they are needed in an article or module. With Jumi.
A + B: Initialization
Write initialization/injection scipt that makes use of Joomla! 1.5 $document object and its methods:
global $mainframe;
$document = &JFactory::getDocument();
$document->addStyleSheet( …); // for multibox.css
$document->addScript(…); //for multibox.js
$document->addCustomTag($script); // for object initialization script – see Multibox developer pages. And do not be afraid: for example my object init script contains 2 lines only:
var box = {};
window.addEvent('domready', function(){box = new MultiBox(' yourboxname ', descClassName: 'multiBoxDesc'});});
Documentation + examples can be found here http://docs.joomla.org. The whole php script that uses Jumi represents some 15 lines of code. It is easy, isn't it?
C: Usage
Just make a standard link with <a href= “” class=”yourboxname”>xxx</a> when you want it to be shown in Multibox.
What is fine you can view individual Joomla! articles in Multibox too: instead of referencing an article by
index.php?option=com_content…
reference it by
index2.php?option=com_content…
Tip:
The articles content may lay too close to Multibox boundaries. Then substitute in multibox.js lines 431 and 432 (for Multibox version 1.3.1)
width: this.contentObj.width,
height: this.contentObj.height,
by (10 - for example)
width: this.contentObj.width-10,
height: this.contentObj.height-10,
That’s all. As I said it is terribly simple.
Sunday, October 26, 2008
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment