Javascript Fancybox image click可以独立工作，但不能与我的其他代码一起工作_Javascript_Fancybox 2

Javascript Fancybox image click可以独立工作，但不能与我的其他代码一起工作

javascript

Javascript Fancybox image click可以独立工作，但不能与我的其他代码一起工作,javascript,fancybox-2,Javascript,Fancybox 2,因此，我的问题是，当单击一个图像以启用嵌入了所有其他代码的fancybox时，该函数不再工作。有人能找到原因吗？我试图将图像放在容器和缩略图类之前，但没有成功。。首先，我给你我所有的代码（这使得fancybox无法工作），下面是一个独立的代码，它可以让图像像我希望的那样弹出 <!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <title>

因此，我的问题是，当单击一个图像以启用嵌入了所有其他代码的fancybox时，该函数不再工作。有人能找到原因吗？我试图将图像放在容器和缩略图类之前，但没有成功。。首先，我给你我所有的代码（这使得fancybox无法工作），下面是一个独立的代码，它可以让图像像我希望的那样弹出

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="bootstrap-3.3.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js"></script>
  </head>
  <body>
    <section>
    <header>
     <a href="#">TITLE</a>
    </header>
    <nav>
      <ul>
           <li><a href="#">AAA</a></li>
           <li><a href="#">BBB</a></li>
           <li><a href="#">CCC</a>
           <ul>
              <li><a href="#">111</a></li>
              <li><a href="#">222</a></li>
              <li><a href="#">333</a></li>
           </ul></li>
           <li><a href="#">DDD</a>
              <ul>
                <li><a href="#">111</a></li>
                <li><a href="#">222</a></li>
                <li><a href="#">333</a></li>
              </ul></li>
           <li><a href="#">EEE</a></li>
      </ul>
    </nav>
  </section>
  <div class='container'>
     <div class="thumbnail">
           <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
              <a class="fancybox" href="images/image1.jpg"><img src="images/image1.jpg"></a>
           </div>
           <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
              <a class="fancybox" href="image2.jpg"><img src="image2.jpg"></a>
           </div>
           <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">      
              <a class="fancybox" href="image3.jpg"><img src="image3.jpg"></a>
           </div>
           <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
              <a class="fancybox" href="image4.jpg"><img src="image4.jpg"></a>
           </div>
           <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
              <a class="fancybox" href="image5.jpg"><img src="image5.jpg"></a>
           </div>
        </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
<script scr='bootstrap-3.3.2-dist/js/bootstrap.js'></script>
<script src="http://goo.gl/1yIJUX"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $(".fancybox").fancybox();
  });
  </script>
</body>
</html>


标题

















$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

这是工作正常的代码：

<!DOCTYPE html>
<html lang='en'>
<head>
 <title>Title</title>
 <link rel="stylesheet" href="main.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
 <script type="text/javascript" src="fancybox/source/jquery.fancybox.js"></script>
</head>
<body>
 <a class="fancybox" rel="group" href="images/image1.JPG"><img src="images/image1.JPG" alt="" /></a>
 <script type="text/javascript">
    $(document).ready(function() {
    $(".fancybox").fancybox();
    });
</script>
</body>
</html>


标题
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

它可能找不到fancybox css和js文件。URL以斜杠开头是可疑的：如果你有一个“fancybox”子目录，你应该有一个

<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

除了“它不工作”之外，更好地描述它的功能（不工作）可能会有所帮助。当我单击图像链接时，它不会激活fancybox功能。我被链接到新页面上的图像，就好像没有启用fancybox一样。@Jongware-我编辑了我的问题。你能再看看吗？谢谢，您正在加载jQuery两次。通常情况下，您只需要一个版本的jQuery并在任何其他插件之前加载。我应该做什么才能不加载两次jQuery？尝试删除不同的链接，但无效@JFKU关于无法找到css或js文件的说法是正确的。一些教程告诉我链接到jquery.pack.js，但我将其改为仅jquery.js，现在它可以在我清理过的示例中使用。但它在我链接到bootstrap和其他类似文件的其他文件中仍然不起作用。这里链接的层次关系重要吗？.fancybox类在其他类中，这也很重要吗？欢迎使用stackoverflow！如果有人回答了你的问题，你应该接受，如果你还有其他问题，你应该用新的问题问他们，而不是完全重写旧的问题。想想这对未来的读者来说会有多困惑。

如果有人回答了你的问题，你应该接受它

如果你认为这是正确的答案；）@JFK好吧，在这个案例中，OP评论说“你是对的”，然后完全重写了这个问题，因为他有了新的不相关的问题。。。（并在“这是工作正常的代码”部分中包含了我的答案）嗨，很抱歉让人困惑。在我修复了斜杠问题后，Fancybox无法工作的问题仍然存在（但感谢@lbalazscs）。此外，我被禁止提出新问题，stackoverflow让我重写现有的问题，这就是我为什么这么做的原因。