![](/img/trans.png)
[英]Uncaught TypeError: $(…).find(…).once is not a function in bootstrap/js/bootstrap.js?
[英]Uncaught TypeError: data[option] is not a function bootstrap.js:1215
我从这里使用bootstrap lightbox收到以下错误:
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>
该脚本在一定程度上起作用。 当我单击缩略图时,灯箱会启动,并且会显示正在加载的图像,但是图标的全尺寸图像从不显示。
数据类型似乎都位于正确的位置,所以我不知道是什么导致了此错误。 我尝试搜索,但没有得到任何结果。
错误背后的原因是bootstrap版本和bootstrap lightbox插件版本之间不兼容。
在这里查看工作演示:
$(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,请包括以下资产:
更改订单。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.