将活动状态传递给旋转木马模态

Question

希望将缩略图图片/图像弹出到引导模式旋转木马中，具有活动状态，因此选择它作为旋转木马的起点。然后，该模式旋转木马视口区域将通过css显示同一张照片/图像的更大版本。

通常，可以使用Pret伤图/图片库等，但我正在寻找一种方法，它不使用脚本本身中编写的图像或html的源文件夹，而是使用我现有的无序图像列表，所以我继续使用类名并使用一组图像。

我试验了许多旋转木马，但没有一个能将我现有的列表和或图像结合在一起。我这样做的动机是允许通过类将另一个图像叠加在顶部:位置-1，位置-2，等等css类。

我试着在ul列表中略过这门课，但它也不起作用。

我唯一能看到普雷特兰托/画廊工作的方法是

任何方向都是非常感谢的！

<div class="carousel carousel-stage">
    <ul class="images thumbnails">
        <li id="design1" class="image span4 item thumbnail"><a rel="" href="#myModal" data-toggle="modal" title="" class="thumbnail-image position-1"><img src="img1.jpg"></a></li>
        <li id="design2" class="image span4 item thumbnail"><a rel="" href="#myModal" data-toggle="modal" title="" class="thumbnail-image position-2"><img src="img2.jpg"></a></li>
     ...
    </ul>
</div>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Design Images</h3>
  </div>
  <div class="modal-body">
    <div class="carousel carousel-stage">
    <ul class="images thumbnails">
        <li id="design1" class="image span4 item thumbnail"><a a rel="" href="#myModal" data-toggle="modal" title="" class="thumbnail-image position-1"><img src="img1.jpg"></a></li>
        <li id="design1" class="image span4 item thumbnail"><a a rel="" href="#myModal" data-toggle="modal" title="" class="thumbnail-image position-2"><img src="img2.jpg"></a></li>
     ...
    </ul>
 </div>
</div>
  ...
</div>

Answer 1

这里有一个可能的解决方案，它是一种黑客，但它似乎运作良好。

基本上，只需移动DOM的一部分并根据需要更改类。也许这能让你朝正确的方向走。

<script>

$('#myModal').on('show', function() {

// When the modal is shown add Bootstrap's carousel-inner class, move the thumbnails, then invoke the carousel

  $('ul.thumbnails').toggleClass('carousel-inner', true).appendTo($('#myCarousel'));
  $('#myCarousel').carousel();
});

$('#myModal').on('hide', function() {

// After the modal is dismissed ensure that the active class is removed from all the thumbnails and restore the DOM to the pre-modal state

  $('.thumbnail').each(function() { 
      $(this).toggleClass('active', false).show();
  });    
  $('ul.thumbnails').toggleClass('carousel-inner', false);
  $('ul.thumbnails').appendTo($('section#thumbnails'));
});

$('.thumbnail').click(function() {

// Since the thumbnails already have the data attributes we need to tell the carousel which slide-index to use just toggle the active class

    $(this).toggleClass('active');
});

</script>