Question

我正在使用Colorbox for jQuery。我从http://www.jacklmoore.com/colorbox/

下载了插件

下面是我的jQuery代码：

<script type="text/javascript">
    $('#gallery').colorbox();
</script>

HTML代码：

<!doctype html>
<html lang="en">

<head>
    <title>JQuery - Chapter 4</title>
    <link rel="stylesheet" href="CSS/colorbox.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>

    <script src="JS/jquery.colorbox.js"></script>
    <script src="JS/jquery-3.3.1.js"></script>
</head>

<body>
    <a id="gallery" href="images/dog.jpeg">Dog</a>
    <a id="gallery" href="images/horse.jpg">Horse</a>
    <a id="gallery" href="images/tree.jpg">Tree</a>
</body>

当我单击图像名称时，它不会触发colorbox（）方法。而是将我带到图像源。

谢谢

Answer 1

需要2个修改：

1）为所有锚点标签（例如gallery1，gallery2，gallery3和

）提供唯一ID

2）添加click js函数以在每个锚标记上调用colorbox

像下面这样：

<script type="text/javascript">
  function colorbox1()
   {  
     $('#gallery1').colorbox();
     return false;
   }

  function colorbox2()
   {  
     $('#gallery2').colorbox();
     return false;
   }

   function colorbox3()
   {  
     $('#gallery3').colorbox();
     return false;
   }
</script>

和HTML：

<body>
    <a id="gallery1" click="return colorbox1();" href="images/dog.jpeg">Dog</a>
    <a id="gallery2" click="return colorbox1();" href="images/horse.jpg">Horse</a>
    <a id="gallery3" click="return colorbox1();" href="images/tree.jpg">Tree</a>
</body>

Answer 2

如前所述，每个元素必须具有唯一的ID。如果要对它们进行分组，则应使用Class属性。这也是指南中概述的方式：http://www.jacklmoore.com/colorbox/guide/

$(function() {
  $('.gallery').colorbox({
    rel: "group1"
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<a id="gallery-1" class="gallery" href="https://i.imgur.com/t5L4otE.jpg">Dog</a>
<a id="gallery-2" class="gallery" href="https://i.imgur.com/wZHWtP3.jpg">Horse</a>
<a id="gallery-3" class="gallery" href="https://i.imgur.com/ihH1kfg.jpg">Tree</a>

此代码段符合预期。必须在插件之前加载jQuery。由于正在加载Bootstrap（使用jQuery）和jQuery库，因此您可能会得到一些奇怪的结果。因此，我将研究使用哪个更好的库。

相对

这可以用作Colorbox的替代选择。这允许用户将元素的任何组合分组到一个画廊中，或者覆盖一个现有的rel，以便元素不被组合在一起。 $("a.gallery").colorbox({rel:"group1"}); 注意：该值也可以设置为“ nofollow”以禁用分组。

希望有帮助。

无法在jQuery中使用Colorbox

2 个答案: