Bootstrap圖片庫模態下一個/上一個按鈕

Question

我正在使用此代碼進行引導模態畫廊。 我需要添加下一個/上一個按鈕。 我嘗試添加按鈕，但是因為這只是一個模式，所以我無法在它們之間切換。 有任何想法嗎？ http://www.bootply.com/KBspXYVjaX

Answer 1

你可以得到Image當前的數字Image的模式遞增/遞減Image數量，並從下一個和上一個按鈕圖像列表中獲取該圖像：
jQuery的

$('.thumbnail').click(function(){
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#myModal').modal({show:true});
});

$('#next-btn').click(function() {
    var link = $('.modal-body a');
    var number = parseInt(link.attr('title').match(/\S+$/));
    number++;
    if(number === 13) {
        number = 1;
    }
    $('.modal-body').html($('#img-container').find('a[title="Image ' + number + '"]').parent('div').html());
    $('.modal-title').text('Image ' + number);
});

$('#prev-btn').click(function() {
    var link = $('.modal-body a');
    var number = parseInt(link.attr('title').match(/\S+$/));
    number--;
    if(number === 0) {
        number = 12;
    }
    $('.modal-body').html($('#img-container').find('a[title="Image ' + number + '"]').parent('div').html());
    $('.modal-title').text('Image ' + number);
});

下一個和上一個標記

<div class="modal-footer">
    <button id="prev-btn" class="btn btn-warning">Prev</button>
    <button id="next-btn" class="btn btn-primary">Next</button>
    <button class="btn btn-default" data-dismiss="modal">Close</button>
</div>

自舉
http://www.bootply.com/71H5HWFEWP

我修改了圖像的原始標記，因為它從圖像6跳到圖像8，因此請確保序列遞增一。