Добрый день!
Увеличиваю изображения таким образом:
https://jsfiddle.net/4gW4y/823/<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a href="#" class="thumbnail">
<img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
</a>
</div>
</div>
<div class="modal fade" id="image-modal" tabindex="-1" role="dialog">
<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>
<div class="modal-title">Просмотр изображения</div>
</div>
<div class="modal-body">
<img class="img-responsive center-block" src="" alt="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
$(function() {
$('a.thumbnail').click(function(e) {
e.preventDefault();
$('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src'));
$("#image-modal").modal('show');
});
$('#image-modal .modal-body img').on('click', function() {
$("#image-modal").modal('hide')
});
});
Подскажите, как передать в модальное окно сразу несколько изображений. т.е:
<a href="#" class="thumbnail">
<img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
<img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
<img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
</a>
Чтобы на странице отображалось только первая картинка, а в модальном окне все 3 можно было слайдером переключать между собой. Как это можно сделать?