Bootstrap carousal: open the clicked image - html

Question

I am making a lightbox - carousel - modal page with Bootstrap 3. So far, all is going very well, except for one thing:
When the carousel starts, it always starts at the very first image of the page, not the image that I click on.
In other words: if I click on image 1 then image 1 is opened, if I click on image 2, then image 1 is opened, if I click on image 3, then image 1 is opened.
After that, the carousel works like it should, but what I want is, that when I click on image 2, that image 2opens, and if I click on image 3, that image 3 opens.
Some code:
<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">×</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>
Any suggestions please?

Answer 1

You can use Bootstrap Carousel to create your own custom lightbox, something as shown that I've tried to show in the snippet below, please have a look:
$('.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">×</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>
Hope this helps!

Answer 2

Try to something like this.
Just replace below line in your html code
<div id="carousel-example-generic" class="carousel slide">
to
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">