Bootstrap LightBox

Question

我在使用bootstrap lightbox插件时遇到了困难。我的代码是从

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的图像，并有一个标题为每个图像。现在每个图像都显示在页面上(我不希望这样)，图像是不可点击的，而且整个lightbox只有一个标题。

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>

请注意，这里有一组可点击的缩略图，它们具有data-toggle="lightbox"属性并链接到包含全尺寸图片的ul。

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