衝突的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>