How do you install 2 jQuery plug-ins using the same jQuery version (v 1.6.1) in one html page?_问答_开发者

How do you install 2 jQuery plug-ins using the same jQuery version (v 1.6.1) in one html page?

开发者 https://www.devze.com 2023-03-14 19:49 出处：网络

I\'m pretty new with installing jQuery plug-ins, and I\'ve only gone so far as installing 1 plug-in per web page.

I'm pretty new with installing jQuery plug-ins, and I've only gone so far as installing 1 plug-in per web page.

Now I'm trying to install 2 jQuery plug-ins on the same html page:

Nivo Slider
Js Scrollpane

Both use the same jQuery library v1.6.1 and I'm not quite sure how to write these codes correctly without causing any conflict.

The jQuery code in my site is as follows:

<head> 

<!-- START SCROLL PANE SCRIPT --> 
<link href="js/scrollpane/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.jscrollpane.min.js"></script>
<script id="sourcecode" type="text/javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();
});

</script> 

<!-- START NIVO SLIDER SCRIPT --> 
<link href="js/nivo-slider/nivo-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(f开发者_如何学Pythonunction() {
    $('#slider').nivoSlider();
});
</script>

</head>

I definitely know this is the wrong way to do it as both jQuery plug-ins are not functioning properly on my site.

Please help me. :) How can i write both of these plug-ins correctly so I can get both of them to work properly?

Thanks in advance. :)

You don't require to include jquery js file twice. As both uses same version of jquery library.

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.jscrollpane.min.js"></script>
<script id="sourcecode" type="text/javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();
});

</script> 

<!-- START NIVO SLIDER SCRIPT --> 
<link href="js/nivo-slider/nivo-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

you don't need to bother about it...include all required js files once. both plugin will work

You shouldn't be loading the jquery 1.6.1 twice. Using the jQuery library you should usually group your JavaScript the following way:

load jquery
load jquery UI (in case you need it)
load all plugins (once)
do your "own thing"

In case you load the basic jQuery-library twice, the second time will overwrite the existing $-object that may have already been extended by a plugin before. This plugin will therefore completely lose all of its functionality.