Question

希望将缩略图照片/图像弹出窗口转换为自举模式轮播，具有活动状态，因此选择它作为轮播的起始点。然后，该模态轮播视口区域将通过css显示相同照片/图像的更大版本。

通常情况下，可以使用Prettyphoto / gallery等，但我正在寻找一种不会在脚本本身内写入图像或html源文件夹的方法，而是使用我现有的无序图像列表，所以我继承了类名并使用了一组图像。

我尝试了许多旋转木马，但没有一个用我现有的列表和/或图像组合来结束活动状态。我的动机是允许通过类重叠另一个图像：position-1，position-2等css类。

我尝试过删除ul列表以通过课程，但它也没有用。

唯一可以看到Prettyphoto / Gallery工作ID的方法是

非常感谢任何方向！

<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>

将活动状态传递给轮播模态

1 个答案: