颜色框功能不起作用答案

【问题标题】：Colorbox function is not working颜色框功能不起作用
【发布时间】：2018-08-23 23:19:57
【问题描述】：

我正在尝试使用颜色框 jquery 创建一个 HTML 图像库。但我永远无法让图像在颜色框中打开，而是正常打开。也许我做错了什么。代码如下：

<!doctype html>
<html>
  <head>
    <title> Gallery </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/colorbox.css">
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.colorbox.js"></script>
    <script>
    jQuery(document).ready(function () {
      jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
    });
    </script>

  <body>
    <h1>Gallery</h1>

    <div class="gallery">
    <a href="images/1.png"><img src="images/1.png"></a>
    <a href="images/2.png"><img src="images/2.png"></a>
    <a href="images/3.png"><img src="images/3.png"></a>    
    <a href="images/4.png"><img src="images/4.png"> </a>   
    <a href="images/5.png" ><img src="images/5"></a>   
    <a href="images/6.png" ><img src="images/6"></a>   
    <a href="images/7.png" ><img src="images/7"></a>
  </body>
</html>

【问题讨论】：

看起来您包含了缩小版和非缩小版的彩盒脚本，但我没有看到包含 jQuery 库。此外，a.gallery 选择器没有选择任何东西，它正在寻找一个锚元素 <a>，其类为 gallery，像 .gallery 这样的选择器可能就是您要寻找的。span>
查看文档后，<a> 元素应该具有gallery 的类，那么您当前的选择器将起作用。您仍然需要下载并包含 jQuery (<script src="js/jquery.min.js"></script>)，然后删除缩小或未缩小的脚本。
同意 @mark.hch 关于需要包含 jQuery 的 .js 文件并能够删除其中一个颜色框 .js 文件，但根据您的上述标记，我认为您可以将您的选择器从 a.gallery 更改为 .gallery a（a 元素是带有类 gallery 的元素的后代）。从我看到的文档和示例中无法快速判断您是否还需要在您的标记中包含rel 参考（尽管如果您在同一页面上有多个照片画廊，它肯定需要一些注意您希望被明确分组）。祝你好运。

标签： jquery colorbox

【解决方案1】：

正如我在 cmets 中提到的，尝试包括 jQuery，删除其中一个颜色框脚本，并将 gallery 类添加到锚点。像这样：

<!doctype html>
<html>
  <head>
    <title> Gallery </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/colorbox.css">
    <!-- include a compatible jquery version and remove one of the colorbox scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.colorbox.min.js"></script>
    <script>
      jQuery(document).ready(function () {
        jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
      });
    </script>
  </head>
  <body>
    <h1>Gallery</h1>
    <div>
      <!-- Add the class of gallery to the anchors -->
      <a class="gallery" href="images/1.png"><img src="images/1.png"></a>
      <a class="gallery" href="images/2.png"><img src="images/2.png"></a>
      <a class="gallery" href="images/3.png"><img src="images/3.png"></a>    
      <a class="gallery" href="images/4.png"><img src="images/4.png"> </a>   
      <a class="gallery" href="images/5.png" ><img src="images/5"></a>   
      <a class="gallery" href="images/6.png" ><img src="images/6"></a>   
      <a class="gallery" href="images/7.png" ><img src="images/7"></a>
    </div>
  </body>
</html>

【讨论】：