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
Friday, October 24, 2008
Tabs in Joomla! anywhere and easily
Web 2 comes with extensive use of javasript technologies. They make web more eye catching, more clearly organized and, in some cases, even faster.One of these technologies brings the possibility to present information in the so called tabs. There are a lot of javascript libraries offering it. It is natural to use effects that are built in Joomla! In Joomla! 1.5 there is implemented mootools javasript library.
There are many implementation of “motools tabs” (just search in Google). There are many Joomla! extensions, plugins and modules, that uses them. You do not need these specialized extensions. Jumi can do that too. Can insert tabs in Joomla anywhere. And it is really simple.
Let’s take for example SimpleTabs implementation.
To use SimpleTabs you have to: A) inject some js and css code (SimpleTabs.js, SimpleTabs.css) into the <head> Joomla! section, B) initialize object (again into the <head>) by a javascript and C) use it.
A + B: The code.
Make use of Joomla! 1.5 document object and its methods:
global $mainframe;
$document = &JFactory::getDocument();
$document->addStyleSheet( …); // for SimpleTabs.css
$document->addScript(…); //for SimpleTabs.js
$document->addCustomTag(...); // for initialization script – see SimpleTabs developer pages.
Documentation to document object with examples can be found here. The whole php script implementing SimpleTabs into Joomla! represents some 15 lines of uncompressed code. Easy, isn't it? Why to bother about specialized extensions?
C: And usage?
If your entrySelector: 'h3' then write Joomla! content as you always write. Remember only that every h3 tag changes itself into the tab when displayed in Joomla! frontend. For example the whole content of the article can look like this:
{jumi [mytabs.php]}
<h3>A</h3><p>Easy</p>
<h3>B</h3><p>motools tabs</p>
<h3>C</h3><p>with Jumi</p>
The result depends on your SimpleTabs.css file. It could be like image on the right.
Remark: I am using SimpleTabs with various css layouts on my pages. Choosing which one I do via jumi argument: {jumi [mytabs.php] [cssselector]}
Spice your web with Google gadgets
Everybody knows there are thousands of gadgets there. Some of them are nice another are useful.But how to include them into Joomla! pages?
With Jumi it is easy: you can display them in module positions, in articles or you can dsiplay them in a special gadgets (component) page.
See Edo’s Tip and trick how to do that exactly.
Order, buy and reserve with Jumi
Well, most of us sell something. And majority of us, Joomla! people, through our webs.If we are selling products in huge amounts we can make use of specialized components like Virtuemart. If we are selling services in “tons” we can make use of Freeway solution.
But many of us sell only several items of our products or services per month. I do not think it is effective to implement huge and sophisticated solution like those mentioned above in this case. Simple, reliable and elegant solution will suffice. It can be done with Jumi.
An individual Joomla! article can be devoted to an individual item. We can describe the product or service characteristics, its prize and virtually anything we want here. With Jumi plugin we then add to the article an intelligent form which final purpose is to display an order/buy/reserve button. The form sends via method post at the least an article id ($at the least) to the url, where Jumi component application (XYZ) waits for its input. Like this:
<?php
defined('_JEXEC') OR die( "Direct Access Is Not Allowed" );
$html="<div>";
$html .= "<form action=‘index.php?option=com_jumi&fileid=XYZ method='post' name='ORD$article->id'>";
$html .= "<input type='hidden' name='product_id' value='$article->id' />";
$html .= "<input value='Order' class='button' type='submit' />";
$html .= "</form></div>";
echo $html;
?>
That means the component application knows the product ordered ($article->id is stored in $_POST[product_id] global variable) and can continue in the ordering process (e.g. display the article name ($article->title), introtext or the whole text, display a form for picking up personal data, etc, etc).
At the end the order can be stored in the database table and/or send by e-mail for further human processing.
Simple, reliable, elegant. With Jumi.
Thursday, October 23, 2008
3rd parties advertisements
There are a lot of global and local providers offering ads to be displayed at your web pages. Either as a paid or as an exchange service. You know them well: Google, AdBrite, Amazon, …, to name the few.
They provide you with some scripts. The problem is how to include such a script into Joomla! page?
Normally you will need one extension per one provider. Jumi covers them all. With Jumi it’s quite easy to include virtually any add (javascript, html, video, flash, images… ) from any provider into Joomla! pages. Even a beginner can make it.
First decide where you want ads to be displayed: module position, article or a special page with one advertisement or full of ads? For this purpose choose Jumi module, plugin or component respectively.
See Edo’s Tip and trick Google example how to do that exactly. Once you understand the idea you will be able to process any ad from any provider.
We will put Jumi on the Moon
Edo (Edvard) and me (Martin) agreed on 2008-08-08 we will join several of our opensource codes, some of our resources and effort for mutual benefit and for the benefit of Joomla! users.We will be developing, offering and supporting custom code Joomla! extensions under the brand name Jumi.
What are these extensions for?
Generally speaking: they enable to insert custom codes like html, php, js, css into Joomla! pages. That means into Joomla! articles, module positions and into specially created pages – components.
At this time we have wide range of such extensions available: module and plugin for Joomla 1.0.x and module, plugin and component for Jooma! 1.5.x. Although they can be used independently of each other they can collaborate. We will strive for their better integration and cooperation in the near future. Stay connected!
In this blog you will find concrete problems and indications how to solve them with Jumi. Some of them are explained in more detail in Edo’s Tips and tricks, some useful snippets (or Jumi applications) can be even downloaded there too.
We hope you will not only enjoy Jumi but also that Jumi will bring you eyes, information and users catching storm to your Joomla! pages.
Hello Jumi
This component includes custom scripts (html, php, js, css, ...) into Joomla! pages.
Collaboration between multiple Joomla! pages and other Jumi extensions is easy.
For Jumi downloads and guides visit jumi.vedeme.cz
For Jumi demos, tips and tricks visit edo.webmaster.am/jumi
Collaboration between multiple Joomla! pages and other Jumi extensions is easy.
For Jumi downloads and guides visit jumi.vedeme.cz
For Jumi demos, tips and tricks visit edo.webmaster.am/jumi
Subscribe to:
Posts (Atom)