遺漏的類型錯誤：數據[選項]不是函數bootstrap.js：1215

我從here得到使用引導燈箱以下錯誤：遺漏的類型錯誤：數據[選項]不是函數bootstrap.js：1215

Uncaught TypeError: data[option] is not a function bootstrap.js:1215

我已經複製所有文件目錄沒有改變任何參數。

這是我的代碼：

JS鏈接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="/js/bootstrap.js"></script> 
<script src="/js/bootstrap-lightbox.js"></script> 

<link rel="stylesheet" href="/css/bootstrap.css"> 
<link rel="stylesheet" href="/css/bootstrap-theme.css"> 
<link rel="stylesheet" href="/css/bootstrap-social.css"> 
<link rel="stylesheet" href="/css/bootstrap-lightbox.css"> 
<link rel="stylesheet" href="/css/font-awesome.css"> 
<link rel="stylesheet" href="/css/bootstrap-override.css"> 
<link rel="stylesheet" href="http://fonts.example.com/custom-font.css">

畫廊：

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header">Portfolio</h1> 
    </div><?php 
     $images = glob($_SERVER['DOCUMENT_ROOT'].'/img/gallery/*.{jpg,png,gif}', GLOB_BRACE); 
     $imageCount = count($images); 
      if($imageCount == 0) { 
      echo "There are currently no images in this gallery."; 
      } 
      else if($imageCount !== 0) { 
      $counter = 1; 
     foreach($images as $image) { 
      echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'> \n\r"; 
     echo "<a data-toggle='lightbox' data-title='A random title' data-footer='A custom footer text' href='http://img.example.com/gallery/".basename($image)."' class='thumbnail'><img src='http://img.example.com/gallery/thumb.php?src=" . basename($image) . "&w=400&h=300&a=c' alt='Jolly Roger PCS Gallery Image' title='One Call Does It All' class='img-responsive'></a> \n\r"; 
     echo "</div> \n\r \n\r \r\n"; 
     } 
     } 
    ?> 
    </div> 
</div>

而且畫廊的腳本用於圖像輸出：

<div class='col-lg-3 col-md-4 col-xs-6 thumb'> 

<a data-toggle='lightbox' data-title='A random title' data-footer='A custom footer text' href='http://img.example.com/gallery/10177464_1495074060751956_373648277891171115_n.jpg' class='thumbnail'><img src='http://img.example.com/gallery/thumb.php?src=10177464_1495074060751956_373648277891171115_n.jpg&w=400&h=300&a=c' alt='Jolly Roger PCS Gallery Image' title='One Call Does It All' class='img-responsive'></a> 

</div>

最後是JS頁的結尾處：

<script type="text/javascript"> 
$(document).on('click', '[data-toggle="lightbox"]', function(event) { 
    event.preventDefault(); 
    $(this).ekkoLightbox(); 
}); 
     </script>

該腳本在某種程度上工作。當我點擊一個縮略圖圖片時，燈箱會閃爍並且顯示加載圖片，但圖標的全尺寸圖片永遠不會。

數據類型都顯示在正確的位置，所以我不知道是什麼導致了這個錯誤。我嘗試了一次搜索，沒有得出任何結果。

來源

2016-09-27 Jesse Elser

你能把它的jsfiddle或codepen –

你是什麼意思？這就是我所知道的一切。 –

在jquery之前加載lightbox js –

錯誤背後的原因是bootstrap和bootstrap lightbox插件的版本不兼容。

檢查工作演示here：

$(document).on('click', '[data-toggle="lightbox"]', function(event) { 
 
    event.preventDefault(); 
 
    $(this).ekkoLightbox(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox"> 
 
    <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> 
 
</a>

如果您使用的引導3.xx版則包括以下資產：

如果您正在使用引導版本4.xx然後包括下面的asse TS：

來源

2016-10-05 06:06:30

我複製了bootstrap 3的這些文件，現在錯誤消失了，但圖像仍然無法加載。加載圖像不會出現，但我得到灰色覆蓋。 –

檢查圖像資源 –

更改您的訂單。

<script src="/js/bootstrap-lightbox.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="/js/bootstrap.js"></script>

來源

2016-10-04 23:58:23

我做到了。我的加載圖像停止工作，控制檯顯示以下錯誤： 'Uncaught TypeError：$（...）。ekkoLightbox不是函數（匿名函數）@（index）：396dispatch @ jquery.min.js：5y。處理@ jquery.min.js：5' –

遺漏的類型錯誤：數據[選項]不是函數bootstrap.js：1215

回答

相關問題