Question

我正在尝试构建一个Bootstrap轮播，当单击一个按钮时，主图像应该以Bootstrap模式显示。

我读过this answer但这并不是我想要的。这个答案为每个图像创建了一个模态。我想只使用一个模态，并根据您单击的图像更改该模态内的图像。

我无法让它发挥作用！

根据请求fiddle

我拥有的是：

// Carousel

 <div id="slider" class="col-md-12 productimage">
  <div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
      <div data-slide-number="0" class="item active">
        <img class="img-responsive" src="url-to-image"></div>
      <div data-slide-number="1" class="item">
        <img class="img-responsive" src="url-to-image"></div>       
     </div>                     
  </div>

  <div class="bottom">
   <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control">                                 
   </a>
   <div id="zooming">
    <a data-target="#myModal" data-toggle="modal">full size</a>
   </div>
    <a data-slide="next" role="button" href="#myCarousel" class="right carousel-control">                                     
    </a>    
  </div>
</div>

<div id="slider-thumbs" class="row hidden-xs">
    <!-- Bottom switcher of slider -->
    <ul class="hide-bullets">
      <li class="col-sm-6">
        <a id="carousel-selector-0" class="thumbnail">
        <img src="url-to-image"></a>
      </li>
      <li class="col-sm-6">
        <a id="carousel-selector-1" class="thumbnail">
        <img src="url-to-image"></a>
      </li>    
    </ul>                 
  </div>

//模态

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <!-- Change image source for large popup-->
        <img src="..." class="img-responsive" alt="Responsive image">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

// JQUERY

  $(document).ready(function($) {      
    $('#myCarousel').carousel({
      interval: 5000
    });
    $('.carousel-control.left').click(function() {
      $('#myCarousel').carousel('prev');
    });

    $('.carousel-control.right').click(function() {
      $('#myCarousel').carousel('next');
    });
    $('#carousel-text').html($('#slide-content-0').html());

    //Handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
      var id = this.id.substr(this.id.lastIndexOf("-") + 1);
      var id = parseInt(id);
      $('#myCarousel').carousel(id);
    });

  });

我在哪个点或哪里抓取图像的网址以显示在模态中？你是怎样做的？是否更容易使用数据属性，然后使用js抓取该属性？

应该有一种更简单快捷的方法，对吧？！

Bootstrap轮播和模态弹出窗口

0 个答案: