CubeCartForums.org for CubeCart third-party documentation, modifications, skins and services

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> [Resolved] Implementing custom jquery slider gives conflict, How to bypass the conflict between jquery calls
krs1
post Apr 10 2012, 07:47 AM
Post #1


Member
Group Icon

Group: Members
Posts: 195
Joined: 27-February 08
Member No.: 3,701



Hi,

For days now I'm trying to implement a VERY simple jquery slider into a standard CC5 template. The problem is that it's not working. I know it has to do with conflicts between the multiple jquery calls.

The problem is that I'm not capable of resolving this issue. I tried several 'solutions' but no luck.

So my question is how to get this piece of code working in the templates/main.php

The complete script itself:

CODE
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>

<script>
$(document).ready(function() {
    $('#image_rotate').innerfade({
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '147px'
    });
});
</script>

<ul id="image_rotate" style="list-style: none;">
    <li><img src="001.jpg"></li>
    <li><img src="002.jpg"></li>
    </ul>


Hope for an answer.

Kind regards,

Boudi
Go to the top of the page
 
+Quote Post
ToucanWebDesign
post Apr 10 2012, 09:16 AM
Post #2


Super Member
Group Icon

Group: Commercial Contributor
Posts: 521
Joined: 2-June 07
From: Derbyshire, UK
Member No.: 475

Store Review Here



Part of the reason is likely because CC5 includes jQuery itself, just later down the page, so what you'll want to do is get rid of the bottom one to stop the errors from happening.

Try opening up your js/common.html file and just take out the jQuery line, probably looks like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

That'll hopefully fix the conflicts fine. Alternatively, if you were putting that code on all of the site anyway, you could leave the original jquery as it is, and just include the innerfade code on the common.html file itself as well, so you'd just need:

CODE
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#image_rotate').innerfade({
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '147px'
    });
});
</script>


--------------------
Toucan Web Design Limited - UK based Cubecart developers and designers - specialists in custom modifications
Go to the top of the page
 
+Quote Post
krs1
post Apr 10 2012, 03:02 PM
Post #3


Member
Group Icon

Group: Members
Posts: 195
Joined: 27-February 08
Member No.: 3,701



Hi,

Thnq for your quick respond.

Your solution did the trick! Thank you for taking the time to help me out.

Kind regards,

Boudi

Go to the top of the page
 
+Quote Post
ching
post Aug 28 2012, 07:07 PM
Post #4


Newbie
Group Icon

Group: Members
Posts: 4
Joined: 31-May 12
Member No.: 29,149



Found this very useful cheers
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 3rd September 2014 - 06:58 AM
CubeCart Developers Network
Get CubeCart!
© 2007 - 2014  CubeCartForums.org in association with Inspired Solutions. Sponsored by Devellion