冲突的ubergallery和自定义脚本

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> 

这是我的错误：

Uncaught TypeError: $(...).colorbox is not a function at HTMLDocument. (##.php:24) at j (jquery.js:2) at Object.fireWith [as resolveWith] (jquery.js:2) at Function.ready (jquery.js:2) at HTMLDocument.J (jquery.js:2)

Answer 1

jQuery库和颜色框插件加载两次。这从来都不好。

下面是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>