Bootstrap灯箱不工作

时间:2015-04-03 11:03:21

标签: javascript jquery html css twitter-bootstrap

您好我一直在尝试为Twitter Bootstrap实现Jason Butz的Lightbox插件(我正在使用Bootstrap的第3版)。

到目前为止,我在将灯箱从缩略图图像触发到较大的图像方面取得了有限的成功。

这是其他人的例子:

http://jsfiddle.net/gmeyer/WwMFD/

这是我的不在的地方(以下小提琴中的所有js和css与灯箱文件相同):

http://jsfiddle.net/qwwpetvu/

...和我的代码:

<div class="container">
    <div class="item">
        <a data-toggle="lightbox" href="#lightbox0">
            <img class="gallery" src='https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_n.jpg'>
        </a>
    </div>
</div>

<div id="#lightbox0" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="lightbox-dialog">
        <div class="lightbox-header">
            <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
        </div>
    <div class="lightbox-content">
        <img src='https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_b.jpg'>
        <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
</div>

我一直在将我的代码与示例进行比较,我无法弄清楚问题是什么。

1 个答案:

答案 0 :(得分:2)

下面显示的小问题

 <div id="lightbox0" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
//Removed hide class and corrected the selector id.
 <div id="#lightbox0" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">

Fiddle