Question

我将此代码用于bootstrap模式库。我需要添加下一个/上一个按钮。我尝试添加按钮，但因为这只是一个模态，我无法在它们之间切换。有任何想法吗？ http://www.bootply.com/KBspXYVjaX

Answer 1

您可以在模式递增/递减Image数字中获取当前Image的{{1}}个数字，然后使用下一个＆amp;可以从图像列表中获取该图像。上一页按钮：
jQuery

Image

下一步＆amp;上一个标记

$('.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);
});

<强> Bootply
http://www.bootply.com/71H5HWFEWP

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

Bootstrap图库的模态下一个/上一页按钮

1 个答案: