0

我有一个需要在其中运行多个 JQuery 脚本的网页。一种是用于灯箱图像查看器，另一种是为我的图像添加砖石布局。两个脚本单独工作都很好，但是当它们在一起时，灯箱将无法工作。我究竟做错了什么？

我在这里有一个问题的演示：有砌体：http ://shareit.me/jquery.fancybox-1.3.4/scrapbook.html 没有砌体：http ://shareit.me/jquery.fancybox-1.3.4/剪贴簿2.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>
4

1 回答 1

0

你的 JS 有一些错误。

  1. 你$(document).ready(function() {忘了关闭这个标签。

  2. 您包括 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>
于 2012-09-18T15:10:48.190 回答