我正在设置blueimp灯箱，lighbox正在启动但是没有加载/显示图像，我将在脚本中添加什么以允许它找到图像..？我希望能够让lighbox显示来自任何缩略图的图像点击... 谢谢你的帮助。
这是我的代码：
<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>
答案 0 :(得分：1)
我的代码处理正常：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>