使用Blueimp Gallery的Twitter Boostrap
使用Blueimp Gallery的Twitter Boostrap
提问于 2014-09-27 15:14:36
我有一个简单的html来显示一个画廊页面。当我点击图片开始画廊幻灯片时，只显示了第一张图片，其余的显示了一个黑色页面。我也不知道为什么。也许我漏掉了什么？
这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Web Mobile</title>
<link rel="stylesheet" href="css/blueimp/blueimp-gallery.min.css">
<script src="js/blueimp/blueimp-gallery.min.js"></script>
</head>
<body>
<h1>Gallery for my works</h1>
<div id="links">
<div class="slides">
<a href="img/1.jpg" title="1">
<img src="img/thumbnails/1.jpg" alt="1">
</a>
<a href="images/2.jpg" title="2">
<img src="img/thumbnails/2.jpg" alt="2">
</a>
<a href="images/3.jpg" title="3">
<img src="img/thumbnails/3.jpg" alt="3">
</a>
</div>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides">
<a href="img/1.jpg" title="1" description="Description for Image 1">
<img src="img/1.jpg" alt="1">
</a>
<a href="images/2.jpg" title="1" description="Description for Image 2">
<img src="img/2.jpg" alt="1">
</a>
<a href="images/3.jpg" title="3" description="Description for Image 3">
<img src="img/3.jpg" alt="3">
</a>
</div>
<h3 class="title"></h3>
<h3 class="description"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<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>
<script src="js/jquery.blueimp-gallery.js"></script>
<script src="js/blueimp/demo.js"></script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2014-09-27 15:37:19
所以这实际上是我自己的愚蠢。我真想给自己一拳。在我的图库脚本错误之前，我的类链接中的图像链接路径。
我做的另一个错误是在我的Gallery脚本内的幻灯片div中添加图像链接。
<div class="slides">
<a href="img/1.jpg" title="1" description="Description for Image 1">
<img src="img/1.jpg" alt="1">
</a>
<a href="images/2.jpg" title="1" description="Description for Image 2">
<img src="img/2.jpg" alt="1">
</a>
<a href="images/3.jpg" title="3" description="Description for Image 3">
<img src="img/3.jpg" alt="3">
</a>
</div>在我的画廊脚本里面。请把这里当作关门了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26072282
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号