jQuery is a great tool for developing javascript based interactivity and animation. There are a number of available libraries built off of jQuery. Two of my favorites are prettyPhoto and jqPlot. When using these two together on a Joomla site, I found a conflict between the two libraries. You see prettyPhoto and jqPlot both use jQuery.

Being a web developer, I’ve seen many instances where two libraries conflict. For example jQuery and Prototype conflict due to the way they use a “$” as their variable call. jQuery even has a built in noConflict() function which should fix these issues. BUT in the case of jqPlot and prettyPhoto this noConflict function DID NOT WORK. (http://api.jquery.com/jQuery.noConflict/)

Well, what is a web designer to do when problems are causing scripts not to work?? Let’s solve the root of the problem. In my case, I was using this on a Joomla site. Joomla defines templates based off of one index.php file. So my problem was the fact that prettyPhoto and jqPlot are loading on every page, thus causing the conflict. Luckily, I didn’t need to use both libraries on one page. I only needed to use them on separate pages.

My solution was to find the base url defined by Joomla and then include jqPlot on that page if it matches.

and then within a script tag you can use this function to find the base URL’s string:

 Javascript | 
 copy code |
?
 
01
function getUrl()
02
{
03
var pos = window.location.href.indexOf(window.location.host);
04
return window.location.href.substring(pos+ window.location.host.length);
05
}
06
jQuery(document).ready(function($) {
07
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
08
 
09
});
10
 
11
//Only include jqPlot for making charts if its the specific Page with this baseURL. Otherwise it conflicts with prettyPhoto,
12
 
13
//so you have to instantiate jqPlot only on the page needed.
14
 
15
if(getUrl() == "/index.php/products/page" || getUrl() == "/index.php/page"){
16
 
17
//call StartChart to start the jQuery code that runs jqPlot
18
 
19
StartChart();
20
 
21
}
22
 
23

StartChart() instantiates jqPlot and it looks like this for a normal bar chart:

 Javascript | 
 copy code |
?
 
01
function StartChart(){
02
 
03
$(function(){
04
 
05
$.jqplot.config.enablePlugins = true;
06
 
07
var s1 = [1778.5, 1903.3, 2200, 2500, 2900, 3100];
08
 
09
var ticks = ['2007', '2008', '2009', '2010', '2011','Q1 2012'];
10
 
11
plot1 = $.jqplot('chart1', [s1], {
12
 
13
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
14
 
15
animate: true,
16
 
17
// Will animate plot on calls to plot1.replot({resetAxes:true})
18
 
19
animateReplot: true,
20
 
21
//animate: !$.jqplot.use_excanvas,
22
 
23
cursor: {
24
 
25
show: false,
26
 
27
zoom: false,
28
 
29
looseZoom: true,
30
 
31
showTooltip: true
32
 
33
},
34
 
35
seriesDefaults:{
36
 
37
renderer:$.jqplot.BarRenderer,
38
 
39
pointLabels: { show: false }
40
 
41
},
42
 
43
axes: {
44
 
45
xaxis:
46
 
47
{
48
 
49
renderer: $.jqplot.CategoryAxisRenderer,
50
 
51
ticks: ticks
52
 
53
},
54
 
55
yaxis:
56
 
57
{
58
 
59
tickOptions:
60
 
61
{
62
 
63
formatString: "$%'d"+" mil"
64
 
65
}
66
 
67
}
68
 
69
},
70
 
71
seriesColors: [ "#139046"],
72
 
73
highlighter: {
74
 
75
show: true,
76
 
77
showLabel: true,
78
 
79
tooltipAxes: 'y',
80
 
81
sizeAdjust: 5.5 , tooltipLocation : 'ne'
82
 
83
}
84
 
85
});
86
 
87
});
88
 
89
};

There is probably a better workaround, so if you have suggestions, please let me know! In the meantime, this solves my conflict issue between jqPlot and prettyPhoto.