遗漏的类型错误：数据[选项]不是函数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

回答

相关问题