Need Help with jParallax conflicting scripts_问答_开发者

Need Help with jParallax conflicting scripts

开发者 https://www.devze.com 2023-04-05 22:30 出处：网络

I am trying desparately to combine the jParallax plugin with the jQuery Circulate plugin. Basically, i want to have a planet \"orbiting\" around the jParallax plugin i have, or at least on top of it,

相关专题：jquery

I am trying desparately to combine the jParallax plugin with the jQuery Circulate plugin. Basically, i want to have a planet "orbiting" around the jParallax plugin i have, or at least on top of it, however, everytime i place the right beneath the circulate plugin stops working. Wh开发者_运维百科en i move it down underneath the jParallax code (right above the tag), it works fine, but the jParallax stops working! Anyone know what's going on here? At first I thought it was because of the layers conflicting, but the jParallax is still working fine so long as the planet doesn't circulate. Any responses will be 'ppreciated! ;)

http://goatsy.me/parallax_circulatetest.html

here's the code:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="jquery.jparallax.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
</script> 
<meta name="robots" content="noindex, nofollow" /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.easing.1.2.js' </script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.circulate.js' </script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/example.js'></script>
 <link rel='stylesheet' type='text/css' href='CIRCULATE/Circulate/css/style.css' /> 
</head>

<body>

<img src="CIRCULATE/Circulate/images/planetspin.gif" alt="A Friggin Unicorn, yo." id="unicorn" />
<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div id="page-wrap"> 
</div>
<div id="contenttop">
<p>&nbsp;</p><p>&nbsp;</p>
<div id="parallax"> 
<div style="width: 1174px; height: 481px;"> 
<img alt="" src="images/spacebg.png"/> 
</div> 
<div style="width: 1374px; height: 681px;"> 
<img style="position:absolute; top:-300px; left:-200px; bottom:0px;" alt="" src="images/planetbg.png"/> 
</div> 
<div style="width: 861px; height: 554px;"> 
<img style="position:absolute; top:200px; left:400px; bottom:0px;" alt="" src="images/rocketship.png"/> 
</div>  
<div style="width: 367px; height: 537px;"> 
<img style="position:absolute; top:50px; right:50px; bottom:0px;" alt="" src="images/astrogoat.png"/> 
</div> 

</div>
</body>
</html>

Try changing your html head content to the following:

<meta name="robots" content="noindex, nofollow" /> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel='stylesheet' type='text/css' href='CIRCULATE/Circulate/css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="jquery.jparallax.js"></script> 
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#parallax').jparallax({});
    });
</script> 
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.easing.1.2.js'></script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.circulate.js'></script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/example.js'></script>

From what I can see you have jQuery included twice on the page, I've removed one and moved the newer version to the top of the javascript includes. I also moved your link and meta tags above the script tags