-1

I am trying to add a photo slider from Wowslider that use jQuery v1.8.3 in my website that has a navigation menu based on jQuery but I don't know the exact version (here is the tutorial where I took the source files )

When comment out one of the two jquery.js files the other one works fine. However, together something is going wrong I can't make a slider from Wowoslider and an animations menu work together correctly.

The code in my HTML is these. the problems comes with js/jquery.js(unknown version) and engine1/jquery.js(1.8.3 version)

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-bp.js"></script>
    <script type="text/javascript" src="js/navigation.js"></script>
    <script type="text/javascript" src="date_time.js"></script>
    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->
</head>

I try this Can I use multiple versions of jQuery on the same page?

The solution seems simple but i can't understand this

Then, instead of $('#selector').function();, you'd do jQuery_1_3_2('#selector').function(); or jQuery_1_1_3('#selector').function();.

I change my including scripts code in my html like this:

<!-- load jQuery 1.2.3 -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    var jQuery_1_2_3 = $.noConflict(true);
    </script>
            <!-- ...other code... -->
    <!-- load jQuery 1.8.3 -->
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <script type="text/javascript">
    var jQuery_1_8_2 = $.noConflict(true);
    </script>

Then i try to change the code of 2 .js file that use jQuery 1.2.3 so i replace all the $ chars with this jQuery_1_2_3

an sort example default is

(function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = $.curCSS(fx.elem,'backgroundPosition');

And i change to this:

(function(jQuery_1_2_3) { jQuery_1_2_3.extend(jQuery_1_2_3.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = jQuery_1_2_3.curCSS(fx.elem,'backgroundPosition');

I think i understand something wrong.. Steel dont working..

Community
  • 1
  • 1
sudogetit
  • 31
  • 2
  • 8
  • If you insist on using two versions of jQuery in your site you'll need to invoke jQuery.noConflict(). Here are the docs - http://api.jquery.com/jQuery.noConflict/ Other than that if you'll post the relevant code and markup we'll try to help you solve this. – Jay Blanchard Feb 05 '13 at 14:29
  • 2
    The one from the site is 1.2.3. Very old. Try to just use the 1.8.3 if you can. – Mark Meyer Feb 05 '13 at 14:29
  • Also I Firefox browser work together the slider and the navigation menu without obvious problems.. I want find a solution tou work at most common browsers. like chrome safari.... – sudogetit Feb 05 '13 at 14:39

1 Answers1

0

Here I came up with a solution which is tested by my self. I check your Menu Tutorial and Downloaded the Source Code then I use Wow Slider in Same Page but my way is as:

// Add below code in Top of Head

<!-- Navigation Menu-->
<link rel="stylesheet" href="css/main.css" type="text/css" />   
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery-bp.js" ></script>
<script type="text/javascript" src="js/navigation.js" ></script>
<!-- End Navigation -->

// And Add Wow Slider Script in the Bottom of Page

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

Now do some changes in 'navigation.js'

1) Write all the functions inside 

(function($) {
  $(function() {
  // all navigation function put here

  });
})(jQuery);
// other code using $ as an alias to the other library

instead of

$(document).ready(function(){

});

I uploaded my code for you on this link. Please Download and let me know it's working for you or not.. for me it's working on Chrome and Firefox.

Nono
  • 6,986
  • 4
  • 39
  • 39
  • Dear @Neeraj Singh I change my navigation.js with yours and i make the changes in my index.html ! steel no working for me. But your demo code is working fine with firefox & Ghrome! I am goining to check it again! I find a semi-solution with putting the newer jQuery.js first in order and then the older(navigations jQuerty) That give me a delay at navigation motion but almost working and the slider is working good but the bullets of slider dont work. – sudogetit Feb 07 '13 at 13:24
  • Why must put the Wowslider jQuerty at the end of body? Make any difference to put that in the < >> right then my wowslider code? – sudogetit Feb 07 '13 at 13:26