Fancybox图像点击可以独立工作，但不能与我的其他代码一起工作

Fancybox image click works isolated but not with my other code

本文关键字：工作 但不能 我的 其他 一起 代码 Fancybox 独立 图像      更新时间：2023-11-23

所以我的问题是，当单击一个图像以启用嵌入了我所有其他代码的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>

这是运行良好的代码：

<!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>

可能找不到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>
相关文章：