jquery - Bootstrap 模式上的图像预览

Question

    $(document).ready(function(){
    jQuery.fn.exists = function(){console.log(this);return this.length>0;}
    var lisiz=$('ul.imagelist li').size();
    $('ul.imagelist li:lt(3)').addClass('active');
      $('ul.imagelist li:lt(3)').addClass('active');
          var lisiz = $('ul.imagelist li').size();
          if(lisiz<1){
            $('.loadmore h3').html('No Images');
          }
          $('.loadmore').on('click', function() {
                    $('ul.imagelist').find('li.active').last().nextAll(':lt(3)').addClass('active');
            if (!$('ul.imagelist li').not('.active').length) {
              $('.loadmore').text('All' + " " + lisiz + ' images showen, No images to show');
            }
      });
     jQuery.fn.exists = function(){return this.length>0;}
    $('ul.imgmodal li').on('click',function(){
    $('ul.imgmodal li').removeClass('active');
    $(this).addClass('active');
    //var imgli = $('ul.imgmodal li.active');
    var imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
    $('.modalimg img').attr('src',imgadress);
    $('#myModal').modal('toggle');

    });

//click next
        $('.next').on('click',function(){
            if ($('ul.imgmodal li.active').next('ul.imgmodal li').exists()) {
                var imgli=$('ul.imgmodal li.active').next('ul.imgmodal li');
                $('ul.imgmodal li.active').removeClass('active');
                imgli.addClass('active');
                 imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
                $('.modalimg img').attr('src',imgadress);
                //alert(imgadress);
            }else{
                    $('ul.imgmodal li.active').removeClass('active');
                    $('ul.imgmodal li').first().addClass('active');
                     imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
                    $('.modalimg img').attr('src',imgadress);
                    //alert(imgadress);
                }


        });
        //click prew
        $('.prev').on('click',function(){

            if($('ul.imgmodal li.active').prev('ul.imgmodal li').exists()){
                var prev = $('ul.imgmodal li.active').prev('ul.imgmodal li');
                $('ul.imgmodal li.active').removeClass('active');
                prev.addClass('active');
                 imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
                $('.modalimg img').attr('src',imgadress);
                //alert(imgadress);
            }else{
                $('.modalimg img').animate({
                width:'100%'
                });
                $('ul.imgmodal li.active').removeClass('active');
                $('ul.imgmodal li').last().addClass('active');
                 imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
                $('.modalimg img').attr('src',imgadress);

                //alert(imgadress);
            }
        });
 });

*{
margin:0;
 }
ul.imagelist li{
    width:20%;
    min-width: 300px;
    margin: 5px;
    display: none;

}
ul.imagelist li img{
    width: 100%;
    height: 200px;
    vertical-align: top;
}
ul.imagelist li.active{
    display: inline-block;
}
.loadmore{
cursor: pointer;
color:red;
}
.imgmodal li{
 width: 20%;
 min-width: 260px;
 margin: 5px;
 vertical-align: top;
 }
.imgmodal li img{
width:100%;
height: 200px;
 }
.modalimg img{
width:100%;
height: 300px;
text-align: center;
}
.cler{
 clear: both;
 }
.prev,.next,.imgmodal li{
cursor: pointer;
 }

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="mainone text-center">
    <ul class="imagelist list-inline text-center imgmodal">
    <li><img src="images/img2.jpg"></li>
    <li><img src="images/img3.jpg"></li>
    <li><img src="images/img7.jpg"></li>
    <li><img src="images/img5.jpg"></li>
    <li><img src="images/img6.jpg"></li>
    <li><img src="images/img7.jpg"></li>
    <li><img src="images/img8.jpg"></li>
    <li><img src="images/img2.jpg"></li>
    <li><img src="images/img3.jpg"></li>
    <li><img src="images/img2.jpg"></li>
    <li><img src="images/img5.jpg"></li>
    <li><img src="images/img6.jpg"></li>
    <li><img src="images/img7.jpg"></li>
    <li><img src="images/img8.jpg"></li>

    </ul>
    <span class="loadmore"><h3>load more</h3></span>
    </div>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
    </div>
   <div class="modal-body modalimg">
    <img src="images/6.jpg">
   </div>
   <div class="modal-footer">
   <h3><span class="prev pull-left">prev</span><span class="pull-right clearfix next">next</span><span class="cler"></span></h3>
  </div>
  </div>

 </div>
 </div>

加载文档后显示三个图像，每当我单击图像时，图像预览将显示在 Bootstrap 模式中，如果我单击下一个或上一个，这些选项也有效。但是，当我关闭模式时，只显示一张图像。

Answer 1

我得到的答案只是改变了 3 行 jquery 之后 $('#myModal').modal('toggle');此行添加 3 行代码并将事件变量更改为 activemodl[在此处更新了 fiddle 链接][1]

    <script>
  $(document).ready(function(){
     jQuery.fn.exists = function(){console.log(this);return this.length>0;}
    var lisiz=$('ul.imagelist li').size();
   // $('ul.imagelist li:lt(3)').addClass('active');
  $('ul.imagelist li:lt(3)').addClass('active');
      var lisiz = $('ul.imagelist li').size();
      if(lisiz<1){
        $('.loadmore h3').html('No Images');
      }
      $('.loadmore').on('click', function() {
                   $('ul.imagelist').find('li.active').last().nextAll(':lt(3)').addClass('active');
        if (!$('ul.imagelist li').not('.active').length) {
          $('.loadmore').text('All' + " " + lisiz + ' images showen, No images to show');
        }
      });
      jQuery.fn.exists = function(){return this.length>0;}
    $('ul.imgmodal li').on('click',function(){
    $('ul.imgmodal li').removeClass('activemodl');
   $(this).addClass('activemodl');
    var imgli = $('ul.imgmodal li.activemodl');
    var imgadress = $('ul.imgmodal li.activemodl').find("img:first").attr("src");
    $('.modalimg img').attr('src',imgadress);
    $('#myModal').modal('toggle');
    var activSize=$('ul.imagelist li.active');
    $('ul.imagelist li:lt(activSize)').addClass('active');
    });

     //click next
       $('.next').on('click',function(){
        if ($('ul.imgmodal li.activemodl').next('ul.imgmodal li').exists()) {
            var imgli=$('ul.imgmodal li.activemodl').next('ul.imgmodal li');
            $('ul.imgmodal li.activemodl').removeClass('activemodl');
            imgli.addClass('activemodl');
             imgadress = $('ul.imgmodal li.activemodl').find("img:first").attr("src");
            $('.modalimg img').attr('src',imgadress);
            //alert(imgadress);
        }else{
                $('ul.imgmodal li.activemodl').removeClass('activemodl');
                $('ul.imgmodal li').first().addClass('activemodl');
                 imgadress = $('ul.imgmodal li.activemodl').find("img:first").attr("src");
                $('.modalimg img').attr('src',imgadress);
                //alert(imgadress);
            }


    });
    //click prew
    $('.prev').on('click',function(){

        if($('ul.imgmodal li.active').prev('ul.imgmodal li').exists()){
            var prev = $('ul.imgmodal li.active').prev('ul.imgmodal li');
            $('ul.imgmodal li.active').removeClass('active');
            prev.addClass('active');
             imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
            $('.modalimg img').attr('src',imgadress);
            //alert(imgadress);
        }else{
            $('.modalimg img').animate({
            width:'100%'
            });
            $('ul.imgmodal li.active').removeClass('active');
            $('ul.imgmodal li').last().addClass('active');
             imgadress = $('ul.imgmodal li.active').find("img:first").attr("src");
            $('.modalimg img').attr('src',imgadress);

            //alert(imgadress);
        }
    });
  });

</script>

更新 fiddle [1]:http://jsfiddle.net/YogeshDV/YEkAt/591/