Question

我正在尝试使用bootstrap旋转木马的模态。我遇到的问题是在点击时显示正确的图像。目前，它会打开图库中的第一个图像或模式关闭时处于活动状态的最后一个图像。

我想知道是否有人知道一种方式（使用jQuery id想象）将.carousel-indicators和.carousel-inner的类更改为活动时单击其相应的缩略图。我正在使用bootstrap 3和rails 4

html：

<div class="container">

  <ul class="row">
    <% @gallery.images.each do |image| %>
        <li>
          <a id="thumb" data-toggle="modal" data-target="#lightbox">
            <img id="imagesource" src="<%= image.photo.url(:thumb) %>">
          </a>
        </li>
    <% end %>
  </ul>

  <div class="modal fade and carousel slide" id="lightbox" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div id="modalCarousel" class="carousel">
            <ol class="carousel-indicators">
              <% @gallery.images.each_with_index do |image, index| %>
                  <li data-target="#lightbox" data-slide-to="<%= index %>" class="<% 'active' if index == 0 %>"></li>
              <% end %>
            </ol>
            <div class="carousel-inner">
              <% @gallery.images.each_with_index do |image, index| %>
                  <div class="item <%= 'active' if index == 0 %>">
                    <img src="<%= image.photo.url(:large) %>">
                    <div class="carousel-caption"><p><%= image.caption %></p></div>
                  </div>
              <% end %>
            </div>
          </div>
          <!-- /.carousel-inner -->
          <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

现在我正在使用<%= 'active' if index == 0 %>为图库中的第一张图片设置要激活的类。但是我觉得我需要使用一些javascript来点击时在模态中打开正确的照片。我正在使用jQuery所以任何特定的答案/提示都会很棒（请记住我的知识水平低）！

非常感谢！

解决

ryantdecker的解决方案很棒！

Answer 1

您应该能够使用bootstrap轮播上提供的方法：

http://getbootstrap.com/javascript/#carousel-methods

具体来说，.carousel(number)似乎就是您要做的事情。如果缩略图的顺序与幻灯片的顺序相符（我假设它会），你应该可以做类似的事情：

    $('a.thumb').each(function(index){
        $(this).click(function(){
           $('#myModal').modal('show');
           $('.carousel').carousel(index);
        });
    });

注意：小心在循环中使用ID属性 - 重复的ID元素会导致很多问题...我在这里使用了一个类（class =“thumb”而不是id =“thumb”在锚点上）而是出于这个原因。

编辑：添加了一个Codepen示例 - 似乎正在使用一个额外的行 - 需要手动调用函数内的模态。上面添加的行（$('#myModal').modal('show');）。

http://codepen.io/ryantdecker/pen/zGNmpK

在模态

1 个答案: