Forums

Problem using jQuery Galleriffic plugin in template

Permalink
Hi Everyone,

I'm having a bit of trouble getting a jquery gallery to work inside c5. It worked fine when I built the template html, but once I'd brought the files inside the themes directory, the gallery just doesn't load properly. The only error I seem to garner is from firebug, which tells me:

'$("#banner_tabs ul.thumbs li").opacityrollover is not a function'

I imagine that it might be some sort of conflict between c5's jquery and my own, but I'm still very new to c5, so I'm not really sure where to start attacking the problem.

If you want to see it in action its:http://nulook.protonoven.com

I've used it on both the homepage and style gallery. Any help or advice would be much appreciated :)

Cheers
 
olsgreen replied on at Permalink Best Answer Reply
olsgreen
Hi,

The reason why your getting the 'function not found' message is because your references to the jQuery libraries are being overridden by C5s own references. (As you probably know C5 uses jQuery as well)

Remove all of your references and insert the references to the following files below the C5 ones:

jquery.galleriffic.js
jquery.opacityrollover.js

The code in your <HEAD> tags currently looks like this:

<!-- Galleriffic specific scripts -->
<link rel="stylesheet" media="screen" type="text/css" href="/themes/nulook/css/galleriffic-homepage.css" />
<script type="text/javascript" src="/themes/nulook/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/themes/nulook/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/themes/nulook/js/jquery.opacityrollover.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Nu-Look Hair Fashion :: Home</title>
<meta name="description" content="" />
<meta name="generator" content="concrete5 - 5.4.0.5" />
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/index.php';
var CCM_CID = 1;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/concrete/images";
Viewing 15 lines of 21 lines. View entire code block.


It should look more like this:

<!-- Galleriffic specific scripts -->
<link rel="stylesheet" media="screen" type="text/css" href="/themes/nulook/css/galleriffic-homepage.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Nu-Look Hair Fashion :: Home</title>
<meta name="description" content="" />
<meta name="generator" content="concrete5 - 5.4.0.5" />
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/index.php';
var CCM_CID = 1;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/concrete/images";
var CCM_TOOLS_PATH = "/index.php/tools/required";
var CCM_REL = "";
</script>
Viewing 15 lines of 20 lines. View entire code block.


You may need to make some more alterations but this is a starting point.

Cheers
O
ZeroGodForce replied on at Permalink Reply
Thanks for this, I'll give it a try and let you know how it goes.
ZeroGodForce replied on at Permalink Reply
It worked!!!

I put the 
<?php  Loader::element('header_required'); ?>
before my calls to the galleriffic scripts and removed my call for jQuery and it worked excellently.

Now all I have to do is figure out why one of my galleries is broken, but as to my original problem this is well and truely solved!

Cheers green2go!
olsgreen replied on at Permalink Reply
olsgreen
Cool!

No problem, could you mark my first reply as the best answer?

Thanks

Oli
ZeroGodForce replied on at Permalink Reply
Er.. I guess it already has been :)