I have a list of thumbnails, on a Bootstrap 3 page. When clicking them, I want to open a modal which contains a carousel of additional info for each of the thumbnails.
I would like that when I click on the thumbnail, the modal opens with the specific slide in the carousel open.
I'm trying the following, but both the modal's "data-toggle" and carousel's "data-slide-to" attributes use "data-target" to set the target, but in this case the targets are two different IDs ("#myModal" and "#gallery" repectively). I can't have two "data-target" on the same HTML tag. Is there a way to hack this easily? Sorry, I'm not a dev.
This is the list of thumbnails:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
</div>
</div>
And here's the modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></div>
<div class="modal-body">
<div id="gallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/600x400&text=item1" alt="item1">
<div class="carousel-caption">
<h4>heading 1</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item2" alt="item2">
<div class="carousel-caption">
<h4>heading 2</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item3" alt="item3">
<div class="carousel-caption">
<h4>heading 3</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item4" alt="item4">
<div class="carousel-caption">
<h4>heading 4</h4>
<p>This is the description.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
</div>
You can wrap the image in anchor that targets the carousel like this:
<a href="#gallery" data-slide-to="0">
<img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal">
</a>
Demo: http://jsfiddle.net/NJWqw/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With