[英]Issues running jquery slider and lightbox on same page?
Complete noobie trying to teach myself some javascript. 完成noobie尝试教自己一些JavaScript。
Basically, I can't get a lightbox to run at the bottom of my page while running a slider towards the top. 基本上,我无法让灯箱在页面底部运行,而向顶部运行滑块。 I started with the slider and it works perfectly on it's own. 我从滑块开始,它本身可以完美工作。 However, when I add the code to run the lightbox, it doesn't work and the slider stops working. 但是,当我添加代码来运行灯箱时,它不起作用,并且滑块停止工作。 I believe my issue is with my CSS, but I'm not sure. 我相信我的问题出在我的CSS上,但我不确定。 Any help is appreciated. 任何帮助表示赞赏。
In the head: 在头上:
<!--Main Page Stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="CSS/inland-wood.css" />
<!-- Slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript"> // This is the script for the banner slider
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- Lightbox Effect -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript"> // This is the script for the lightbox effect
$(document).ready(function() {
$('#thumbnails a').lightBox();
});
});
</script>
My HTML: 我的HTML:
<div id="thumbnails">
<ul class="clearfix">
<li>
<a href="images/photos/01-turntable-illustration-graphic.png" title="Turntable">
<img src="images/photos/01-turntable-illustration-graphic-thumbnail.png" alt="turntable">
</a>
</li>
<li>
<a href="images/photos/02-robot-diy-kit.png" title="DIY Robot Kit">
<img src="images/photos/02-robot-diy-kit-thumbnail.png" alt="DIY Robot Kit">
</a>
</li>
</ul>
</div>
My CSS: 我的CSS:
/** reset lightbox position **/
#lightbox-container-image-data-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/** page structure **/
#w {
display: block;
width: 750px;
margin: 0 auto;
padding-top: 30px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#thumbnails {
display: block;
margin-bottom: 10px;
}
#thumbnails ul li {
float: left;
margin-right: 26px;
margin-bottom: 12px;
}
Add this code after the last script in your header: 在标头中的最后一个脚本之后添加以下代码:
<script>
$.noConflict();
<script>
Here is your revised code 这是您的修改后的代码
<link rel="stylesheet" type="text/css" media="all" href="CSS/inland-wood.css" />
<!-- Slider -->
<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript"> // This is the script for the banner slider
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- Lightbox Effect -->
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript"> // This is the script for the lightbox effect
$(document).ready(function() {
$('#thumbnails a').lightBox();
});
});
</script>
<script>
$.noConflict();
<script>
NOTE: this isn't related to your problem but, you should always add the CSS link before the Script it pertains to. 注意:这与您的问题无关,但是,您应始终在与脚本有关的CSS链接之前添加CSS链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.