Question

我正在尝试使用colorbox 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，删除其中的一个colorbox脚本，然后将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>

色彩盒功能不起作用

1 个答案: