我有一个网页，我需要在其中运行多个 JQuery 脚本。一个用于灯箱图像查看器，另一个用于将砖石布局添加到我的图像中。这两个脚本单独运行时效果很好，但是当它们放在一起时，灯箱将无法运行。我做错了什么？
我这里有一个问题的演示: 砌体:http://shareit.me/jquery.fancybox-1.3.4/scrapbook.html 没有砌体:http://shareit.me/jquery.fancybox-1.3.4/scrapbook2.html
点击太阳镜查看问题。
这是我的来源，其中包含两个脚本。注意，我删除了一些 html:
<!doctype html>
<html>
<head>
<title> Scrapbook </title>
<link rel="stylesheet" type="text/css" href="styles/scrapbook.css"/>
<link rel="stylesheet" type="text/css" href="styles/navbar.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js">
<\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css"
media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
</script>
</head>
<body>
<div id="page-title">
<p> Colin's Scrapbook </p>
</div>
<div id="new-album-button">
<div id="btn" class="create-album">
<p><a href="createalbum.html"> + create album </a></p>
</div>
</div>
<div id="container">
<div id="brick" class="event">
<div class="event-top">
<img src="http://www.destination360.com/north-
america/us/florida/images/s/south-florida-beaches.jpg"/>
</div>
<div class="event-bottom">
<div class="event-bottom-pic">
<img
src="http://cbsmiami.files.wordpress.com/2010/11/bill_baggs_beach.jpg"/>
</div>
<div class="event-bottom-pic">
<img src="http://www.best-beaches.com/images/best-
florida-vacations/florida-best-vacations.jpg"/>
</div>
<div class="event-bottom-pic">
<img src="http://www.destin-florida-
mls.com/images/destin12.jpg"/>
</div>
<div class="event-bottom-pic">
<img src="http://www.rachelmarks.com/wp-
content/uploads/2009/10/Beach-Florida.jpg"/>
</div>
</div>
<div class="event-title">
<p> Florida 2012 </p>
</div>
</div>
<div id="brick" class="moment">
<a id="example1" href="./example/1_b.jpg"><img alt="example1"
src="./example/1_b.jpg" /></a>
</div>
</div>
<script src="jquery/jquery-1.7.1.min.js"></script>
<script src="jquery/jquery.masonry.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '#brick'
});
});
});
</script>
</body>
</html>
最佳答案
你的 JS 有一些错误。
在您的
$(document).ready(function() {上，您忘记关闭此标签。您包含了 2 个 jQuery 实例，它们相互冲突(并且可能相互抵消)。我的建议是只加载 jQuery 1.7。我已经对其进行了测试，它似乎可以与 Fancybox 一起正常工作。
这是正确的、经过测试的工作代码(不是，一切都是绝对路径，因为我是在本地测试的)
<!doctype html>
<html>
<head>
<title> Scrapbook </title>
<link rel="stylesheet" type="text/css" href="http://shareit.me/jquery.fancybox-1.3.4/styles/scrapbook.css"/>
<link rel="stylesheet" type="text/css" href="http://shareit.me/jquery.fancybox-1.3.4/styles/navbar.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script src="http://shareit.me/jquery.fancybox-1.3.4/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://shareit.me/jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="http://shareit.me/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="http://shareit.me/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"
media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
});
</script>
</head>
<body>
<div id="page-title">
<p> Colin's Scrapbook </p>
</div>
<div id="new-album-button">
<div id="btn" class="create-album">
<p><a href="createalbum.html"> + create album </a></p>
</div>
</div>
<div id="container">
<div id="brick" class="event">
<div class="event-top">
<img src="http://www.destination360.com/north-
america/us/florida/images/s/south-florida-beaches.jpg"/>
</div>
<div class="event-bottom">
<div class="event-bottom-pic">
<img
src="http://cbsmiami.files.wordpress.com/2010/11/bill_baggs_beach.jpg"/>
</div>
<div class="event-bottom-pic">
<img src="http://www.best-beaches.com/images/best-
florida-vacations/florida-best-vacations.jpg"/>
</div>
<div class="event-bottom-pic">
<img src="http://www.destin-florida-
mls.com/images/destin12.jpg"/>
</div>
<div class="event-bottom-pic">
<img src="http://www.rachelmarks.com/wp-
content/uploads/2009/10/Beach-Florida.jpg"/>
</div>
</div>
<div class="event-title">
<p> Florida 2012 </p>
</div>
</div>
<div id="brick" class="moment">
<a id="example1" href="http://shareit.me/jquery.fancybox-1.3.4/example/1_b.jpg"><img alt="example1"
src="http://shareit.me/jquery.fancybox-1.3.4/example/1_b.jpg" /></a>
</div>
</div>
<script src="http://shareit.me/jquery.fancybox-1.3.4/jquery/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '#brick'
});
});
});
</script>
</body>
</html>
关于jquery - 使用多个 JQuery 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12479329/