Wednesday, 26 January 2011 20:02 Last Updated on Thursday, 27 January 2011 15:38

Charito & Ebsy Final Canvas by wsamaniego

Sunday, 20 April 2008 13:41 Last Updated on Friday, 24 December 2010 08:30

If you're trying to use FireBoard 1.0.4 and any YooTheme, RocketTheme, or any other Joomla templates or Joomla components that utilize the MooTools framework, you will find out that MooTools has a conflict with FireBoard's JQuery framework. In my case, when I tried to use Fireboard and Page YooTheme template together, my MooTools that came with the template became non-functional on the FireBoard forum page because it overwrote MooTools framework. Everything that uses MooTools framework, like styleswitcher, spotlight, slider, and pretty much the whole YooTools package threw errors not being able to find required functions. Thankfully, developers at JQuery implemented a really easy workaround with the noConflict() method. Unfortunately, nobody at YooTheme, RocketTheme, and FireBoard seem to know about this easy fix. I know this because I originally searched in their forums for hours for the fix, and they all just gave up, which was very discouraging for me at first, and I almost gave up. However, I knew more about the problem, and it was simple problem, and I was willing to try to hack the thing myself to make it work. Eventually, I found out about the noConflict() method that nobody at these forums suggested. I found out later that JQuery and MooTools forums were much more helpful, and have a much more of a "developer" community, whereas other forums I mentioned earlier have a more of a "customer-in-crisis" community with no developers to help them. In YooTheme's case, I was very disappointed with their lack of any real developers. There are few staff members that go around the forum and answer questions, but it seems like their job is just to tell their customers that there is no fix. Those staff members are probably not developers, but rather customer support.

Here is the fix with noConflict()

1. Open /syydemo/components/com_fireboard/fireboard.php

2. Find

// Add required header tags
$mainframe->addCustomHeadTag('<script type="text/javascript" src="' . JB_JQURL . '"></script>');
$mainframe->addCustomHeadTag('<script type="text/javascript">

3. Add noConflict() methd below so it looks like this.

// Add required header tags
$mainframe->addCustomHeadTag('<script type="text/javascript" src="' . JB_JQURL . '"></script>');
$mainframe->addCustomHeadTag('<script type="text/javascript">
jQuery.noConflict();

Here is an explanation of how noConflict() works. JQuery backsup $ variable when it starts loading and overwrites $ variable. noConflict() method simply replaces the current $ variable with backed up $. You need to do this at the end when JQuery is done with loading. The scenario with FireBoard and YooTheme is that MooTools first gets loaded to $ variable, then FireBoard comes and overwrites it, now when you add jQuery.noConflict() method, you are telling it to bring back its overwritten $ back. This method can go anywhere after loading JQuery. This fix will not only work with JQuery and MooTools, but JQuery and any other frameworks it may have conflict with. They can be fixed in a similar way. A helpful hint if this doesn't work is to check if you're loading JQuery first, and then MooTools. If that's the case, you will want to switch the loading points of these frameworks, so that JQuery gets loaded later. At the moment, JQuery is the only framework smart enough to back up things it overwrites. Their developers are smart enough not to assume the people are only going to one framework at a time. If you have any questions, leave a comment here, and I will try to answer.

Sunday, 13 April 2008 23:30 Last Updated on Friday, 24 December 2010 08:29

If you try to combine Joomla! 1.5.2 (1.5.6 works, should work for all), Virtuemart 1.1 (1.2 works, should work for all) and YooTheme template together, you will run into problems with very slow loading times and double lightboxes. Your site will try to load the same javascript over and over again. This is because both Virtuemart and YooTheme template use a javascript libary called MooTools. The problem with double lightboxes comes from having loaded two lightbox javascripts. More specifically, YooTheme template has their own lightbox called Shadowbox, while Virtuemart 1.1 utilizes a popular slimmed-down version of lightbox called Slimbox. I've figured out a workaround to these problems when using these together.

Easy one first. What happens when you try to use these together is your Joomla! site will try to load over 1000 javascripts because it's getting confused trying to load two MooTools. The fix here is simple. Disable MooTools from YooTheme template manager. All your YooTheme modules will still work because VirtueMart will load MooTools for your site.

A harder problem is with the clash between Shadowbox and Slimbox. The problem is that when you click on a product image, you end up with two different lightboxes on top of each other. The Slimbox will load first, then the Shadowbox will load on top of Slimbox. My solution is going use the Shadowbox. The reason is because Shadowbox is better. It is a bit larger in size, but it's able to display not only pictures, but any kind of videos plus external websites. Also, it takes into account how large your browser is, and it will automatically shrink down the full-size image to the maximum allowed by the browser.

So, to only use Shadowbox, we need to stop VirtueMart from loading Slimbox. Then, you'll want to change the image rel tag from "lightbox" to "shadowbox" in VirtueMart's getLightboxImageLink function.

Open htmlTool.class.php in /administrator/components/com_virtuemart/classes/

Find,

 function loadSlimBox( ) {
global $mosConfig_live_site, $vm_mainframe;
if( !defined( '_SLIMBOX_LOADED' )) {
 
vmCommonHTML::loadMooTools();
 
$vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox/\';');
$vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/js/slimbox.js' );
$vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/css/slimbox.css' );
 
define ( '_SLIMBOX_LOADED', '1' );
} 
}

And replace it with,

 function loadSlimBox( ) {
if( !defined( '_SLIMBOX_LOADED' )) {
define ( '_SLIMBOX_LOADED', '1' );
}
}

Then, find,

 function getLightboxImageLink( $image_link, $text, $title='', $image_group='' ) {
 
vmCommonHTML::loadSlimBox(); 
 
if( $image_group ) {
$image_group = '['.$image_group.']';
}
$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );
 
return $link;
}

And replace it with,

 function getLightboxImageLink( $image_link, $text, $title='', $image_group='' ) {
 
vmCommonHTML::loadSlimBox(); 
 
if( $image_group ) {
$image_group = '['.$image_group.']';
}
$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="shadowbox'.$image_group.'"' );
 
return $link;
}

That's it, if you have any questions, leave a comment here, and I will try to answer.

Friday, 10 April 2009 05:00 Last Updated on Wednesday, 07 July 2010 21:24

Thursday, 21 May 2009 05:00 Last Updated on Wednesday, 07 July 2010 21:23