引导图像库模态下一个/上一个按钮

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>

Bootply
http://www.bootply.com/71H5HWFEWP

我修改了您对图像的原始标记，因为它从图像 6 跳转到了图像 8，因此请确保序列以 1 递增。