开发者

How can have 2 jquery slider plugins (different in functionality) on the same web page?

开发者 https://www.devze.com 2023-02-16 05:17 出处:网络
I am currently trying to come up with a website with 2 jquery slider plugins, these sliders have differing ways they function but I have failed. I have implemented both slides separately before and th

I am currently trying to come up with a website with 2 jquery slider plugins, these sliders have differing ways they function but I have failed. I have implemented both slides separately before and they function well in all browsers but not when I try to implement them on the same page, only the easy slider will work but not the nivo slider.

I have tried searching for some clues online but am sure my being a newbie in jQuery or even java has led me to not finding the answer to my problem and to be realistic, I have tried most solutions they offer but in vain. Especially the "no conflict" line of code thus my cry out here.

This is my jQuery code as is in the site:

<script type="text/javascript" src="jquery 1.2.3.js"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<script type="text/javascript" src="easySlider1.7.js"></script>
<script type="text/javascript">
        $(document).ready(function(){   
            $("#slider2").easySlider({
                auto: true, 
                continuous: true
            });
开发者_如何转开发        }); 
    </script>

This is what firebug shows me:

Webpage error details

Message: 'undefined' is null or not an object
Line: 12
Char: 388
Code: 0
URI: file:///D:/...../jquery.nivo.slider.pack.js

The entire line 12 code below as is in the file jquery.nivo.slider.pack.js:

Math.round(e.width()/f.slices);k==f.slices-1?e.append(a('<div class="nivo-slice"></div>').css({left:p*k+"px",width:e.width()-p*k+"px"})):e.append(a('<div class="nivo-slice"></div>').css({left:p*k+"px",width:p+"px"}))}e.append(a('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:f.captionOpacity}));if(g.currentImage.attr("title")!=""){k=g.currentImage.attr("title");if(k.substr(0,1)=="#")k=a(k).html();a(".nivo-caption p",e).html(k);a(".nivo-caption",e).fadeIn(f.animSpeed)}var l=

Things to note:

  • When I try to use the latest jquery then the easy slider gets messed up
  • I decided not to add the <script src="http://ajax.googleapis.com /ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> since it would be repeating of the jquery call...
  • The 2 sliders in question are; the nivo image slider and the other an easy slider for news that keeps sliding to the left or even right since its got the next & previous buttons...

Any kind of help is welcome.


l just upgraded to the latest jquery and it worked like a charm...all long l was using the latest jquery but forgetting to add the extension .js since l was copying the file name from my file manager to the code, so instead of having "jquery-1.5.1.min.js" l would madly throw it in as "jquery-1.5.1.min" :)

0

精彩评论

暂无评论...
验证码 换一张
取 消