Question

我不喜欢承认这一点，但是我复制了一些代码而我无法按照它应该工作的方式工作。我有一些想要在bootstrap模式中显示的图像，并且能够滚动它们。下面是我的HTML代码以及我的javascript代码。我把jquery和bootstrap都正确连接起来了。

<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>

现在javascript代码：

$(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>

bootstrap莫代尔照片库

1 个答案: