Question

我使用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>

这是我得到的错误：

未捕获的TypeError：$（...）。colorbox不是函数 HTMLDocument的。（##。php：24）at j（jquery.js：2）at 在Function.ready上的Object.fireWith [as resolveWith]（jquery.js：2）（jquery.js：2）在HTMLDocument.J（jquery.js：2）

Answer 1

jQuery库和colorbox插件加载了两次。这永远不会好。

以下是他们的CDNs。他们会工作。
现在你必须检查你的相对路径CSS文件是否正确（不是404找不到，check the console）并按正确的顺序加载...我只是不能告诉你你这个。

另外......我非常确定您无法在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>

冲突的ubergallery和自定义脚本

1 个答案: