我确信我的问题有一个简单的解决方案,但对于我的生活,我无法弄清楚我做错了什么。
我正在尝试让bootstrap-lightbox在我的网站上工作(这是一个Django应用,如果这有任何区别的话)。
我的标题中有以下内容:
<script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="static/dash/bootstrap-lightbox.js"></script>
<script src="static/dash/excanvas.min.js"></script>
<script src="static/dash/bootstrap.min.js"></script>
<script src="static/dash/jquery.flot.min.js"></script>
<script src="static/dash/jquery.gritter.min.js"></script>
<script src="static/dash/jquery.flot.resize.min.js"></script>
<script src="static/dash/jquery.peity.min.js"></script>
<script src="static/dash/fullcalendar.min.js"></script>
<script src="static/dash/unicorn.dashboard.js"></script>
<script src="static/dash/unicorn.js"></script>
<script src="static/dash/custom.js"></script>
<link rel="stylesheet" href="static/dash/bootstrap.min.css" />
<link rel="stylesheet" href="static/dash/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="static/dash/fullcalendar.css" />
<link rel="stylesheet" href="static/dash/unicorn.main.css" />
<link rel="stylesheet" href="static/dash/jquery.gritter.css" />
<link rel="stylesheet" href="static/dash/unicorn.grey.css" class="skin-color" />
<link rel="stylesheet" href="static/dash/bootstrap-lightbox.css" />
在我的HTML中:
<a data-toggle="lightbox" href="#worldlightbox" class="thumbnail"><img src="/static/img/pics/bg/thumbs/WorldThumb.jpg" alt=""></a>
<div class="lightbox" id="worldlightbox" style="display: none;">
<div class='lightbox-content'>
<img src="/static/img/pics/bg/World.jpg">
</div>
当我点击链接图片时,根本没有任何反应。控制台中没有错误,脚本正确加载.....
我很确定某处存在一些冲突,因为我尝试过的灯箱插件都没有。
如果有人能够证明我出错的地方,我会非常感激!!
答案 0 :(得分:9)
对不起,这太晚了,但我自己也遇到了问题。对您的问题的简单答案是灯箱不按照应有的方式工作。并且帮助很少且不完整。我不知道开发人员是如何让他们的榜样工作的。但我得到了我的工作,它也适合你:
<ul class="thumbnails" style=" position:relative; top: 110px; display:block;">
<li class="span2">
<a data-toggle="lightbox" href="#carouselLightBox" class="thumbnail">Open Lightbox</a>
</li>
</ul>
<div class="lightbox fade" id="carouselLightBox" style="display: none;">
<div class='lightbox-content'>
<img src="/content/images/mapicons/cad.png" alt="" />
</div>
</div>
无论出于何种原因,将'a'标记放在'ul'中,并使用类名缩略图,然后命名'a'标记类缩略图使其有效。希望Django会花时间尽快解决这个问题......