Галерея изображений Bootstrap modal next/prev buttons

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); 
}); 

Следующая & Предыдущая Markup

<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, поэтому убедитесь, что приращения последовательности по одному.