Javascript 库和自定义脚本冲突

我正在使用

ubergallery

作为图片库，我复制了一个用于弹出表单的脚本，并将其转换为“联系我们”表单弹出窗口

当我同时使用这两个脚本时，我的

ubergallery

无法工作。两个脚本是否有一种协同工作的方法

根据我遵循的说明，脚本的顺序是正确的。我只是不知道为了让这两个函数都工作，应该删除/修改哪一个

    <!-- script/css for ubergallery -->
    <link rel="stylesheet" type="text/css" href="assets/resources/UberGallery.css" />
    <link rel="stylesheet" type="text/css" href="assets/resources/colorbox/1/colorbox.css" />
    <script type="text/javascript" src="://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="assets/resources/colorbox/jquery.colorbox.js"></script>
    <script type="text/javascript" src="resources/colorbox/jquery.colorbox.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("a[rel='Images 1']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
          $("a[rel='Images 2']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
          $("a[rel='Images 3']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
        $("a[rel='Images 4']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
        $("a[rel='Images 5']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
        $("a[rel='Images 6']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
      });
         </script>

    <!--script/css for pop-up form-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>

$（文档）.ready（函数（）{
$（[a[rel='Images 1']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images 2']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images 3']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images 4']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images 5']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images 6']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
});

这是我得到的错误：

未捕获的TypeError:$（…）。colorbox不是位于的函数 HTMLDocument。（php:24）在j（jquery.js:2）在 Function.ready处的Object.fireWith[as resolveWith]（jquery.js:2） （jquery.js:2）位于HTMLDocument.J（jquery.js:2）

---

jQuery库和colorbox插件加载了两次。这从来都不是好事

下面是对他们的建议。它们将起作用。
现在，您必须检查您的相对路径CSS文件是否正确（未找到404），并以正确的顺序加载。。。我不能告诉你这些

还有。。。我很确定您不能在

rel

属性中使用空格。我从选择器中删除了它。。。还要将其从HTML标记中删除

<link rel="stylesheet" type="text/css" href="assets/resources/UberGallery.css" /> <!-- Check this one -->
<link rel="stylesheet" type="text/css" href="assets/resources/colorbox/1/colorbox.css" /> <!-- Check this one -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/resources/demos/style.css"> <!-- Check this one -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $("a[rel='Images1']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
    $("a[rel='Images2']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
    $("a[rel='Images3']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
    $("a[rel='Images4']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
    $("a[rel='Images5']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
    $("a[rel='Images6']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
  });
</script>

$（文档）.ready（函数（）{
$（[a[rel='Images1']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images2']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images3']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images4']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images5']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
$（[a[rel='Images6']）.colorbox（{maxWidth:“90%”，maxHeight:“90%”，不透明度：.5“}）；
});

浏览器控制台中出现了哪些错误？为什么要包含两次jQuery，以及两个不同的版本？在这些脚本中有多个document.ready函数吗？对不起，我是php新手。我只是把我找到的不同脚本放在一起。我在谷歌上搜索了你的错误，找到了我在上面发布的问题，也许下次你也应该这样做，然后再匆忙问一个已经回答过的问题：）脚本标签的顺序似乎是正确的，至少在上面的代码示例的第一部分中——但是jquery和colorbox.js（从多个不同的URL加载）都存在重复项，这可能会导致问题。（即使没有引起问题，链接同一个库的两个副本也是浪费带宽…）谢谢Louys！成功了！现在我明白他们对订单的意思了。：）对命令。对于

.js

文件，首先要加载依赖项。对于

.css

文件，这意味着一条规则与另一条规则具有相同的选择器，但被第二条规则推翻。最后一个将被使用。这就是为什么称之为CSS“级联样式表”的原因。