javascript - Bootstrap 灯箱不工作

Question

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

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

这是别人的例子:

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

这是我的，但不是(下面 fiddle 中的所有 js 和 css 都与 lightbox 文件没有变化):

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>

我一直在将我的代码与示例进行比较，我无法弄清楚问题出在哪里。

Answer 1

下面显示的小问题

 <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