Blueimp画廊灯箱没有加载图像
blueimp gallery lightbox not loading images
我正在设置blueimp灯箱,灯箱正在启动,但没有加载/显示图像,我该在脚本中添加什么以允许它找到图像…?我想只是能够有灯箱显示图像从任何缩略图图像点击…谢谢你的帮助。
下面是我的代码:<body>
.
.
.
<div class="container marketing">
<div class="row">
<div class="col-md-12">
<!--slideshowarea-->
<div class="col-md-offset-2 col-md-10">
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div><!-- blueimp-gallery -->
<!--links-->
<div id="links">
<div class="row">
<div class="col-md-12" id="links1row">
<a href="./imgs/ibiziriko/1.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/1.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/2.0.jpg" title="Apple" >
<img src="./imgs/thumbnails/ibiziriko/2.0.jpg" alt="Apple" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/4.jpg" title="Orange" >
<img src="./imgs/thumbnails/ibiziriko/4.jpg" alt="Orange" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/5.jpg" title="Orange" >
<img src="./imgs/thumbnails/ibiziriko/5.jpg" alt="Orange" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12" id="links2row">
<a href="./imgs/6.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/6.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/7.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/7.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/8.0.jpg" title="Banana">
<img src="./imgs/thumbnails/ibiziriko/8.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/8.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/8.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12" id="links1row">
<a href="./imgs/ibiziriko/9.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/9.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/10.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/10.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/10.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/10.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/11.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/11.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/12.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/12.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/13.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/13.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/14.1.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/14.1.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/14.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/14.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/16.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/16.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/18.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/18.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/21.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/21.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/22.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/22.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/23.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/23.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/24.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/24.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/25.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/25.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/26.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/26.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/27.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/27.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/28.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/28.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/29.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/29.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/30.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/30.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
</div><!--/links-->
</div>
</div>
</div><!--/row-->
.
.
.
</div><!-- /.container -->
<script src="./dist/js/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<script src="./docs/assets/js/docs.min.js"></script>
<script src="./js/blueimp-gallery.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
我有它工作良好这里与您的代码:http://jsfiddle.net/3su8Y/
想知道你是否没有让你的href
指向正确的图像。你必须为缩略图和主图使用不同的文件。
<a href="http://placehold.it/400x400&text=Photo" title="Banana">
<img src="http://placehold.it/100x100&text=Thumbnail" alt="Banana" class="img-thumbnail">
</a>
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像