How to Fix the jQuery and Photo Gallery Conflict in Business Catalyst

Photo Gallery Module in Business Catalyst Breaks jQuery Scripts

Skip Straight to the Solution
Let me set the stage for you. You’ve got a Business Catalyst website with some jQuery functionality, which is typically a jQuery menu of some sort. Everything is working great, then you install the Business Catalyst photo gallery module and your jQuery menu stops working on that page. Unfortunately this is a common BC problem, but fortunately, this seems to be the biggest issue I’ve run into so far.

[simple_box]Business Catalyst is a great online site builder and content management system. If you’re looking for an online sitebuilder tool to build, manage and promote your website, make check out our the free trial. We are a Business Catalyst private label partner and are Business Catalyst Certified. Business Catalyst is Adobe’s software as a service solution.[/simple_box]

Identifying the Problem

In a nutshell, the problem is a conflict between the jQuery and Prototype JavaScript libaries. Many JavaScript libraries use $ as a function or variable name, and this is the cause of the problem. FYI – the Prototype JavaScript is not inserted into your page until you add the photo gallery module, and then it is inserted inline so you won’t find it in the <head> section of your HTML.

Fixing the jQuery Photo Gallery Conflict in Business Catalyst

The solution to fix the problem is to use the the jQuery.noConflict() mode. Basically jQuery has this built in function to ensure compatibility with other JavaScript libraries. There are really 2 parts to fixing the problem. Let’s solve our problem, but keep in mind you can also check out the official jQuery documentation.

Step 1 – Active the jQuery.noConflict() Mode

Insert the following script after you call jQuery. What the script does is replaces the $ with jQuery. It depends on your website, but it is most likely that this change will be in one or more of your Business Catalyst Site-Wide Templates.

<script>jQuery.noConflict();</script>

So, it probably would look something like this example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-type" />
 <link media="all" type="text/css" href="css/style.css" rel="stylesheet" />
 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
 <script src="js/jquery.jcarousel.pack.js" type="text/javascript" charset="utf-8"></script>
[highlight1]<script>jQuery.noConflict();</script>[/highlight1]
 <script src="js/func.js" type="text/javascript" charset="utf-8"></script>
 </head>

Step 2 – Replace the $ with jQuery

In my example, I had a jQuery menu that was having the conflict, so I opened the function file (js/func.js) in Dreamweaver and did a find and replace on every instance of “$” with “jQuery”. Keep in mind you could make this say anything you want i.e. myjQuery, j$, etc., just make sure that it is the same as what you’ve declared in step 1. ([highlight1]jQuery[/highlight1].noConflict). Here is an example of my file. Keep in mind this is not the jQuery file, it is the one that does the magic. Below is a before and after screen shot of my changes. REMEMBER: Your file will be different, and depending on what jQuery magic you’ve used, you made need to do the Search and Replace change in multiple files.

Wrap Up

I know when I first encountered this program I was stumped, so I hope this helps you out if you are having the jQuery Prototype conflict with your Business Catalyst website. Just remember, the fix is pretty straight forward:

Activate the noConflict mode in jQuery
Replace the $ with jQuery

Let me know if you have found this article helpful, or if you’ve got something to add!

Author Scott Barnes (56 Posts)

The man behind SiteBuilder.ws His goal is to help you build, manage and promote your online business by leveraging Social Media and the proper web design. He provides training, consulting, resources and coaching to help your business reach its full online potential! Be sure to connect with Scott Barnes+