Bootstrap LightBox

Question

我在使用bootstrap灯箱插件时遇到了困难。我从

获得了代码

http://jbutz.github.io/bootstrap-lightbox/#home

我希望用户可以点击链接，然后在灯箱中显示所有图片。现在我有以下代码：

<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
  <% for picture in @gallery %>
    <%= image_tag picture.image_url.to_s %>
    <div class="lightbox-caption"><p><%= picture.caption %></p></div>
  <% end %>
</div>

我正在使用CarrierWave图像并为每个图像添加标题。现在每个图像都显示在页面上（我不想这样），图像不可点击，整个灯箱只有一个标题。

Answer 1

问题是您只定义了运行Lightbox代码时弹出的隐藏div。如果您查看页面源代码，您会看到整个Lightbox代码部分如下所示：

<div class="example">
  <ul class="thumbnails">
    <li class="span2">
      <a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
        <img src="assets/img/small.png" alt="Click to view the lightbox">
      </a>
    </li>
  </ul>
  <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
      <img src="assets/img/large.png">
      <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
  </div>
</div>

请注意ul点击式缩略图的data-toggle="lightbox"如何具有{{1}}属性，并指向包含完整尺寸图片的div的链接。

尝试将带有上述属性的可点击缩略图添加到您的代码中。