颜色框功能不起作用

Question

我正在尝试使用彩框 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>

Answer 1

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

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

颜色框功能不起作用

Colorbox function is not working

jquery

colorbox