0
Я пытаюсь добавить карусели к своим модалам, и у меня возникла проблема с вызовом моего JavaScript. Я не могу вспомнить, как вызвать файл javascript, но я копирую то, что нашел в Интернете. Я не уверен, что это проблема или что-то с шаблоном кода, который я нашел. Спасибо за помощь.
Вот мой код:
/* copy loaded thumbnails into carousel */
$('.row .thumbnail').on('load', function() {
}).each(function(i) {
if(this.complete) {
\t var item = $('<div class="item"></div>');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title",title);
\t $(itemDiv.html()).appendTo(item);
\t 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();
\t var id = parseInt(idx);
\t $('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
\t
});.modal-dialog {}
.thumbnail {margin-bottom:6px;}
.carousel-control.left,.carousel-control.right{
background-image:none;
}<html lang="en">
\t <head> \t
\t \t <script src="/js/myscripts.js"></script>
\t \t <meta charset="utf-8">
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <!-- Bootstrap -->
\t \t <link href="css/bootstrap.min.css" rel="stylesheet">
\t \t <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
\t \t <link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
\t </head>
\t <body>
<div class="container-fluid">
<h1>Bootstrap 3 Lightbox using Modal</h1>
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="//placehold.it/1024x768"><img class="thumbnail img-responsive" src="//placehold.it/600x350"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/777"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/EEE"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/DDD"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div>
</div>
<hr>
<a href="http://bootply.com/xmgGysNWgn">Edit on Bootply</a>
<hr>
</div>
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
\t <div class="modal-header">
\t \t <button class="close" type="button" data-dismiss="modal">×</button>
\t \t <h3 class="modal-title"></h3>
\t </div>
\t <div class="modal-body">
\t \t <div id="modalCarousel" class="carousel">
<div class="carousel-inner"></div>
<a class="carousel-control left" href="#modaCarousel" 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>
\t </div>
\t <div class="modal-footer">
\t \t <button class="btn btn-default" data-dismiss="modal">Close</button>
\t </div>
</div>
</div>
</div>
</body>
</html>
Похоже, вы не включили JQuery скрипт. –
Вы даже не включили jQuery. Включите это перед вашим скриптом – Li357