Bootstrap 轮播：打开点击的图片

Question

我正在使用 Bootstrap 3 制作一个灯箱 - 轮播 - 模态页面。到目前为止，一切进展顺利，除了一件事： 当轮播开始时，它总是从页面的第一张图片开始，而不是我点击的图片。 换句话说：如果我单击图像 1，则打开图像 1，如果单击图像 2，则打开图像 1，如果单击图像 3，则打开图像 1。 之后，轮播就可以正常工作了，但我想要的是，当我单击图像 2 时，会打开图像 2，如果单击图像 3，则会打开图像 3。

一些代码：

  <ul class="cropped-images">
    <li class="la active"><a data-content="No 1" href="#lightbox" data-toggle="modal" data-slide-to="0"><img src="images/thumbs/1.jpg" alt="No 1"></a></li>
    <li class="la"><a data-content="No 2" href="#lightbox" data-toggle="modal" data-slide-to="1"><img src="images/thumbs/2.jpg" alt="No 2"></a></li>
    <li class="la"> etc... </ul>

    <div id="lightbox" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">  
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title">TITLE</h4>
                            </div>
             <div id="carousel-example-generic" class="carousel slide">
             <!-- Wrapper for slides -->
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="images/large/1.jpg" alt="...">
                    <div class="carousel-caption">One Image</div>
                  </div>
                  <div class="item">
                    <img src="images/large/2.jpg" alt="...">
                    <div class="carousel-caption">Another Image</div>
                  </div>
                  ... etc...
                  <!-- Controls -->
                  controls code
               </div>
             </div> 
          </div>
       </div>

有什么建议吗？

Answer 1

您可以使用Bootstrap Carousel 来创建您自己的自定义灯箱，如我在下面的sn-p 中尝试显示的内容，请看一下：

	$('.content-holder .thumbnail').each(function(i) {
	var item = $('<div class="item"></div>');
	var itemDiv = $(this).parents('div');
	var title = $(this).parent('a').attr("title");

	item.attr("title", title);
	$(itemDiv.html()).appendTo(item);
	item.appendTo('.carousel-inner'); 
	if (i === 0) { // set first item active
			item.addClass('active');
	}
});

/* activate the carousel */
$('#modalCarousel').carousel({interval: false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
		$('.modal-title').html($(this).find('.active').attr("title"));
});

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
		var idx = $(this).parents('div').index();
		var id = parseInt(idx);
		$('#myModal').modal('show'); // show the modal
		$('#modalCarousel').carousel(id); // slide carousel to selected
});

.thumbnail {
	height: 100px;
	margin: 6px;
}

.thumbnail {
	margin-bottom: 6px;
}


.carousel-control.left {
	background-image: none;
	position: absolute;
	top: 50%;
	left: 0;
	width: 25px;
	height: 100%;
	transform: translateY(-50%);
}

.carousel-control.right {
	background-image: none;
	position: absolute;
	top: 50%;
	right: 0;
	width: 25px;
	height: 100%;
	transform: translateY(-50%);
}

.item .thumbnail {
	margin: 0 auto;
}

body {
	margin: 20px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
	
<div class="content-holder">
	<div class="container">
		<div class="row">
			<div class="col-lg-2 col-sm-3 col-xs-6">
				<a href="#">
					<img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="" title="">
				</a>
			</div>
			<div class="col-lg-2 col-sm-3 col-xs-6">
				<a href="#">
					<img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="" title="">
				</a>
			</div>
		</div>
	</div>
</div>

<!-- lightbox modal -->
<div class="modal" id="myModal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h3 class="modal-title">Lightbox</h3>
			</div>
			<div class="modal-body">
				<div id="modalCarousel" class="carousel">
					<div class="carousel-inner"></div>
					<a class="carousel-control left" href="#modalCarousel" data-slide="prev">
						<i class="glyphicon glyphicon-chevron-left"></i>
					</a>
					<a class="carousel-control right" href="#modalCarousel" data-slide="next">
						<i class="glyphicon glyphicon-chevron-right"></i>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end lightbox modal -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望这会有所帮助！

Answer 2

尝试这样的事情。

只需在您的 html 代码中替换以下行

<div id="carousel-example-generic" class="carousel slide">

到

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">