Bootstrap carousal: открыть изображение с щелчком

Question

Я делаю лайтбокс - карусель - модальная страница с Bootstrap 3. До сих пор все идет очень хорошо, за исключением одной вещи: Когда начинается карусель, она всегда начинается с самого первое изображение страницы, а не изображение, на которое я нажимаю. Другими словами: если я нажимаю на изображение 1, тогда изображение 1 открывается, если я нажимаю на изображение 2, тогда изображение 1 открывается, если я нажимаю на изображение 3, тогда открывается изображение 1. После этого карусель работает так, как должно, но я хочу, чтобы при щелчке по изображению 2, это изображение 2opens, и если я нажму на изображение 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, чтобы создать свой собственный осветителя, то, как показано на рисунке, что я попытался показать в приведенном ниже фрагменте кода, пожалуйста, посмотрите:

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

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

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

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

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

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

 
.thumbnail { 
 
\t margin-bottom: 6px; 
 
} 
 

 

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

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

 
.item .thumbnail { 
 
\t margin: 0 auto; 
 
} 
 

 
body { 
 
\t margin: 20px !important; 
 
}

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

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