Question

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

Answer 1

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

<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图像点击工作孤立但不与我的其他代码

1 个答案: