无法在 jQuery 中使用颜色框答案

【问题标题】：Unable to use Colorbox in jQuery无法在 jQuery 中使用颜色框
【发布时间】：2019-04-26 18:16:04
【问题描述】：

我正在为 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() 方法。而是将我带到图像源。

谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

如前所述，每个元素都必须有一个唯一的 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>

这个 sn-p 按预期工作。 jQuery 必须在插件之前加载。由于您正在加载 Bootstrap（使用 jQuery）和 jQuery 库，您可能会得到一些奇怪的结果。所以我会调查哪个是更好的库。

相对

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

需要进行 2 处修改：

1) 为所有锚标签提供唯一 ID，例如 gallery1、gallery2、gallery3 和

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>

【讨论】：

我正在尝试将图像显示为一个组。试过代码。不工作。