Question

我有一个网页，我需要在其中运行多个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>

Answer 1

你的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脚本

1 个答案: