Joomla FishEye menu (Camp26) with jQuery in no conflict mode

Recently I had to implement a fish menu on a client website based on Joomla CMS. As the deadline was short, I decided to look for a script or module.

Open Source Script (javascript)

First I came across Fisheye Menu by Marc Grabanski. This is an open source script, maybe the mouseover effect is not compelling and extremely spectacular, but it does it job good and, what is really important, is quite easy to implement. You’ll find a firendly tutorial written by John Kolbert.

Fisheye menu script (click to view it in action!)

Joomla module

Looking through Joomla Extension directory I have found non-commerial FishEye Menu from Camp26 team. It looks  much more similar to Mac-like Dock bar than the Grabanski’s script. It is based on jQuery and interface element script. The module is Joomla 1.5 native.

FishEye Menu Module by Camp26

jQuery in non-conflict mode

The only problem is… the Camp26 module needs jQuery working in a normal mode, ie. using $(…) syntax:

$(document).ready(function() {
     ...
});

Joomla 1.5 has MooTools included as default javascript framework. Adding to this some components using Prototype, it is highly recommended to use jQuery in a non-conflict mode, ie. using jQuery(…) instead of $(…) syntax:

jQuery.noConflict();
jQuery(document).ready(function(){
       ...
});

The jQuery javascript framework may be easily included to your Joomla CMS in the non conflict mode with SC jQuery plugin.

Make FishEye Menu module work in non conflict mode

Normally, adopting a script to work with jQuery in non conflict mode is quite easy: just find&replace all $(… with jQuery(… . However, in case of that module it is not that easy. It was encrypted by Code26 team in order to protect from editing. Instead of regular javascript code you will find something like:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+(...)

Fortunately, it is not a dead end. The solution is to put the encrypted content inside:

jQuery(document).ready(function($) {
    $('sth').removeClass();
});

As you can see, inside this structure a regular $(…) syntax may be used.

So finally, we have to edit:

• fisheye.js and iutil.js modifying it as written above:

  (...)
  jQuery(document).ready(function($) {
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+(...)
  });
  

• default.php by simply replacing $(…) with jQuery(…) (in two places in code).

That’s it – now the module is properly working with jQuery in non conflict mode.

Here you can download a modified module.