1

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

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

我尝试了许多轮播，但没有一个与我现有的列表和/或图像组合的活动状态。我这样做的动机是允许通过以下类将另一个图像覆盖在顶部：位置 1、位置 2 等 css 类。

我尝试对 ul 列表进行 iframe 以传递课程，但它也不起作用。

我能看到 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>
4

1 回答 1

0

这是一种可能的解决方案，有点像黑客，但它似乎工作正常。

基本上只是移动 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>
于 2013-09-01T20:22:19.527 回答