Bootstrap Bildergalerie modal next/prev Tasten

Question

Ich benutze diesen Code für modale Bootstrap-Galerie. Ich muss die nächsten/vorherigen Tasten hinzufügen. Ich versuche, Buttons hinzuzufügen, aber da dies nur ein Modal ist, kann ich nicht zwischen ihnen wechseln. Irgendwelche Ideen? http://www.bootply.com/KBspXYVjaX

Answer 1

Sie können die Image Nummer des aktuellen Image im Modal Zuwachs bekommen/dekrementieren die Image Nummer und holen das Bild aus der Liste der Bilder mit den nächsten & zurück Tasten:
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); 
}); 

Weiter & Prev 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

ich Ihre ursprüngliche Markup für die Bilder geändert, weil es von Bild 6 bis Bild 8 gesprungen, so dass die Sequenz um eins erhöht sicherstellen.