1
私はこれを認めているのは好きではありませんが、いくつかのコードをコピーして、動作するように動作させることはできません。私は、ブートストラップ・モーダルに表示され、それらをスクロールできるようにするために、いくつかのイメージを持っています。以下は私のHTMLコードとJavaScriptコードです。 jqueryとブートストラップが正しくリンクされています。bootstrap modal photo gallery
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<ul>
<li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
<img class="img-responsive" src="img/gallery4.jpg">
</li>
<li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
<img class="img-responsive" src="img/gallery5.jpg">
</li>
<li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4">
<img class="img-responsive" src="img/gallery6.jpg">
</li>
</ul>
</div>
</div>
<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-body"> </div>
</div>
</div>
</div>
そして今、javascriptのコード：
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('li').index();
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '"> <b>next</b> »</a>';
html += '<a class="controls previous" href="' + (index) + '">« <b>prev</b></a>';
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
私は、コードをコピーしていますが、私はそれがどのように動作するかを知っていただきたいと思います。なぜ私は働いていないのですか？ – user2655352