引导图像库模式下一步/上一步按钮

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形象，所以一定要确保由一个序列递增。