无法在 jQuery 中使用 Colorbox

Question

我正在为 jQuery 使用 Colorbox。我从 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) 为所有锚标签提供唯一 ID，例如 gallery1、gallery2、gallery3 和

2) 添加点击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 库，您可能会得到一些奇怪的结果。所以我会调查使用哪个库更好。

rel

This can be used as an anchor rel alternative for Colorbox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. $("a.gallery").colorbox({rel:"group1"}); Note: The value can also be set to 'nofollow' to disable grouping.

希望对您有所帮助。

无法在 jQuery 中使用 Colorbox

Unable to use Colorbox in jQuery

jquery

jquery-ui

jquery-plugins