bootstrap 灯箱不显示图像
bootstrap lightbox not showing image
我正尝试在工作中为图库页面实施灯箱 site.I 完全按照 bootstrap 灯箱页面演示中演示的步骤操作
http://www.jasonbutz.info/bootstrap-lightbox/#usage 还有 youtube 视频
https://www.youtube.com/watch?v=J-EZC46hOc8
但是我的灯箱不工作。请帮助我
我的代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="bootstrap-lightbox.css" rel="stylesheet">
<script src="bootstrap-lightbox.js"></script>
这些是头部分中包含的文件。
body部分的代码如下:
<div class="row">
<div class="container">
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="img-3.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
<div class="col-lg-3">
<a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">Open Lightbox
<img src="img-3.png">
</a>
</div>
</div>
</div>
我得到的错误是:
未捕获的类型错误:this.hideWithTransition 不是函数
请帮助代码哪里有问题。
尝试从以下位置删除 class "hide":
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
对我有用。
问题已修复检查我的代码CODEPEN
<a data-toggle="lightbox" href="#demoLightbox" ><img class="thumbnail" src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/small.png"></a>
<div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/large.png" alt="" />
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
</div>
我正尝试在工作中为图库页面实施灯箱 site.I 完全按照 bootstrap 灯箱页面演示中演示的步骤操作 http://www.jasonbutz.info/bootstrap-lightbox/#usage 还有 youtube 视频 https://www.youtube.com/watch?v=J-EZC46hOc8 但是我的灯箱不工作。请帮助我 我的代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="bootstrap-lightbox.css" rel="stylesheet">
<script src="bootstrap-lightbox.js"></script>
这些是头部分中包含的文件。 body部分的代码如下:
<div class="row">
<div class="container">
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="img-3.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
<div class="col-lg-3">
<a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">Open Lightbox
<img src="img-3.png">
</a>
</div>
</div>
</div>
我得到的错误是: 未捕获的类型错误:this.hideWithTransition 不是函数 请帮助代码哪里有问题。
尝试从以下位置删除 class "hide":
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
对我有用。
问题已修复检查我的代码CODEPEN
<a data-toggle="lightbox" href="#demoLightbox" ><img class="thumbnail" src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/small.png"></a>
<div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/large.png" alt="" />
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
</div>