[英]JQuery Cycle Plugin stops working when I include the jquery.js script neccessary for Bootstrap
I have been attempting to recreate the jQuery Cycle Plugin shown here . 我一直在尝试重新创建此处显示的jQuery Cycle Plugin。 I am also using bootstrap 3. If I remove the line <script type="text/javascript" src="static/js/jquery.js"></script>
then it works, however, I need this for my responsive nav-bar and really have no idea why it is doing this. 我也在使用引导程序3。如果我删除了<script type="text/javascript" src="static/js/jquery.js"></script>
则可以正常工作,但是,我的响应式导航需要此行-bar,真的不知道为什么要这么做。 Here is the source code: and the live page is here . 这是源代码:实时页面在这里 。 I have been trying for several hours to get this and have just hit a brick wall. 我已经尝试了几个小时才能做到这一点,并且刚刚撞上了砖墙。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" />
<link href="static/css/bootstrap-theme.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon"><title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-home" href="./index.html" class="navbar-brand">Home</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li id="nav-resume"><a id="link" href="resume.html">Resume</a></li>
<li id="nav-projects"><a id="link" href="portfolio.php">Portfolio</a></li>
<li id="nav-contact"><a id="link" href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
</header>
<div id="wrap">
<div class="container">
<!--container is ended in footer tag.--><body>
<div class="slideshow">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
</div>
</div>
<!--
<div id="footer">
<div class="container">
<p1 class="text-muted credit">© 2013 michaelwashburnjr.com</p1>
</div>
</div>
-->
<!-- Includes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
</body>
</html>
[Edit] I am now using <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
instead of <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
and having the same error. [编辑]我现在使用的是<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
而不是<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
并具有相同的错误。
The jQuery file you are loading is old, Bootstrap requires a higher version looking at their bower package "jquery": ">= 1.9.0"
您正在加载的jQuery文件很旧,Bootstrap需要一个更高版本,查看其Bower软件包"jquery": ">= 1.9.0"
https://developers.google.com/speed/libraries/devguide#jquery https://developers.google.com/speed/libraries/devguide#jquery
You are including jQuery twice in a way that is destroying the cycle plugin. 您以破坏循环插件的方式两次包含jQuery。 You have: 你有:
<!-- include jQuery library --> // FIRST INCLUDE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> // SECOND INCLUDE
<script type="text/javascript" src="static/js/jquery.js"></script>
You should move all of your scripts to the bottom, and include them thusly: 您应该将所有脚本移到底部,并因此包括它们:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
That way your second copy of jQuery doesn't destroy the plugins which were registered with the first copy. 这样,您的jQuery的第二个副本不会破坏在第一个副本中注册的插件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.