bootstrap modal Fotogalerie

Question

Ich mag es nicht, dies zuzugeben, aber ich habe etwas Code kopiert und ich kann es nicht funktionieren, so wie es funktionieren soll. Ich habe ein paar Bilder, die ich in einem Bootstrap-Modal anzeigen möchte und durch sie scrollen kann. Unten ist mein HTML-Code sowie mein JavaScript-Code. Ich habe die jquery und bootstrap alle richtig verbunden.

<div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-10"> 
    <ul> 
     <li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4"> 
      <img class="img-responsive" src="img/gallery4.jpg"> 
     </li> 
     <li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4"> 
      <img class="img-responsive" src="img/gallery5.jpg"> 
     </li> 
     <li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4"> 
      <img class="img-responsive" src="img/gallery6.jpg"> 
     </li> 
    </ul> 
    </div> 
</div> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> </div>   
      </div> 
     </div> 
    </div> 

Und jetzt ist die Javascript-Code:

$(document).ready(function(){   
    $('li img').on('click',function(){ 
     var src = $(this).attr('src'); 
     var img = '<img src="' + src + '" class="img-responsive"/>'; 

     var index = $(this).parent('li').index(); 

     var html = ''; 
     html += img;     
     html += '<div style="height:25px;clear:both;display:block;">'; 
     html += '<a class="controls next" href="'+ (index+2) + '"> <b>next</b> &raquo;</a>'; 
     html += '<a class="controls previous" href="' + (index) + '">&laquo; <b>prev</b></a>'; 
     html += '</div>'; 

     $('#myModal').modal(); 
     $('#myModal').on('shown.bs.modal', function(){ 
     $('#myModal .modal-body').html(html); 

     $('a.controls').trigger('click'); 
    }) 
     $('#myModal').on('hidden.bs.modal', function(){ 
     $('#myModal .modal-body').html(''); 
    }); 




    }); 
}) 


$(document).on('click', 'a.controls', function(){ 
    var index = $(this).attr('href'); 
    var src = $('ul.row li:nth-child('+ index +') img').attr('src');    

$('.modal-body img').attr('src', src); 

    var newPrevIndex = parseInt(index) - 1; 
    var newNextIndex = parseInt(newPrevIndex) + 2; 

    if($(this).hasClass('previous')){    
     $(this).attr('href', newPrevIndex); 
     $('a.next').attr('href', newNextIndex); 
    }else{ 
     $(this).attr('href', newNextIndex); 
     $('a.previous').attr('href', newPrevIndex); 
    } 

    var total = $('ul.row li').length + 1; 
    //hide next button 
    if(total === newNextIndex){ 
     $('a.next').hide(); 
    }else{ 
     $('a.next').show() 
    }    
    //hide previous button 
    if(newPrevIndex === 0){ 
     $('a.previous').hide(); 
    }else{ 
     $('a.previous').show() 
    } 


    return false; 
}); 

Answer 1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class="container"> 
    <div class="row"> 
    <h1>Bootstrap 3 Lightbox image gallery using Modal</h1> 

     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 
     <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="images.jpg"></a></div> 

    <hr> 

    <hr> 
    </div> 
</div> 
<div tabindex="-1" class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button class="close" type="button" data-dismiss="modal">×</button> 
     <h3 class="modal-title">Heading</h3> 
    </div> 
    <div class="modal-body"> 

    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    </div> 
</div> 


<style> 
.modal-dialog {width:600px;} 
.thumbnail {margin-bottom:6px;} 
</style> 


<script> 
$(document).ready(function() { 
$('.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}); 
}); 
}); 
</script>