[SOLVED]I need to include two jQuery packs - script CONFLICTS

[Ovi]

My custom Prestashop theme includes a jQuery jCarousel.

For the jCarousel to work i had to include:

"../js/jquery-1.3.2.min.js"
"../js/jquery.jcarousel.js"

and Prestashop includes as standard:

"/js/jquery/jquery-1.2.6.pack.js"

By this setup, jCarousel won't work, but Prestashop's jquery based picture zooming works.


If i remove

"/js/jquery/jquery-1.2.6.pack.js"

then jCarousel WORKS, but Prestashop's jquery based picture zooming won't work anymore.

Any way to merge them so they work together?
Thanks.

[Ovi]

Surely there must be someone that added custom Jquery plugins to their themes...

[Ovi]

Ok,after a bit of research apparently the problem is that Thickbox hasn't been updated to work with jQuery 1.3. I tried a few modifications i found that were supposed to fix the incompatibillity, but they didn't work..

[Burhan BVK]

If you open the jcarusel.js file, you should see that it ends with something like "(jQuery);". If you change this to another word, something like jQuery13, and edit the jquery-1.3.2.min.js and replace all occurrences of jQuery with jQuery2, this should work side by side with the earlier version of jQuery.

[Ovi]

Ok, after even more reasearch i found out that jCarousel WORKS locally with the Prestashop included jquery pack (jquery-1.2.6.pack.js).

The problem was that i had multiple initializations in my .js script named start.js, i cleared it up and now only contains:

jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel();});

Problem solved

[mouse1]

I'm including what helped me with similiar issue. I'm using Prestashop 1.5.4.0. I have 2 jquery elements on my home page. I simply added the following code in each script:

 

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

 

This is an example script of what it should look like:

 

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>	   
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.coda-slider-2.0.js"></script>
  <script type="text/javascript">

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

   $('#coda-slider-2').codaSlider({
	   autoSlide: true,
	   autoSlideInterval: 4000,
	   autoSlideStopWhenClicked: true,
		 dynamicArrows: false,
   });
  });

  </script>