Jquery 引导模式下的图像预览

$（文档）.ready（函数（）{
jQuery.fn.exists=function（）{console.log（this）；返回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（lisiz0；}
$（'ul.imgmodal li'）。在（'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”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
$（'#myModal'）.modal（'toggle'）；
});
//单击下一步
$（'.next'）。在（'click'，function（）上{
if（$（'ul.imgmodal li.active'）.next（'ul.imgmodal li'）.exists（））{
var imgli=$（'ul.imgmodal li.active'）。下一步（'ul.imgmodal li'）；
$（'ul.imgmodal li.active'）.removeClass（'active'）；
imgli.addClass（“活动”）；
imgadress=$（'ul.imgmodal li.active'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}否则{
$（'ul.imgmodal li.active'）.removeClass（'active'）；
$（'ul.imgmodal li'）.first（）.addClass（'active'）；
imgadress=$（'ul.imgmodal li.active'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}
});
//单击prew
$（'.prev'）。在（'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'）；
上一个addClass（“活动”）；
imgadress=$（'ul.imgmodal li.active'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}否则{
$（'.modalimgimg'）。设置动画({
宽度：'100%'
});
$（'ul.imgmodal li.active'）.removeClass（'active'）；
$（'ul.imgmodal li'）.last（）.addClass（'active'）；
imgadress=$（'ul.imgmodal li.active'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}
});
})；

*{
保证金：0；
}
李先生{
宽度：20%；
最小宽度：300px；
保证金：5px；
显示：无；
}
ul.imagelist li img{
宽度：100%；
高度：200px；
垂直对齐：顶部；
}
ul.imagelist li.active{
显示：内联块；
}
.loadmore{
光标：指针；
颜色：红色；
}
李先生{
宽度：20%；
最小宽度：260px；
保证金：5px；
垂直对齐：顶部；
}
.imgmodal li img{
宽度：100%；
高度：200px；
}
莫达利姆先生{
宽度：100%；
高度：300px；
文本对齐：居中；
}
克莱尔先生{
明确：两者皆有；
}
.prev、.next、.imgmodal li{
光标：指针；
}

加载更多
&时代；
模态头
普雷弗奈特

我得到了答案，只需更改jquery的3行即可 $（'#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>

$（文档）.ready（函数（）{
jQuery.fn.exists=function（）{console.log（this）；返回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（lisiz0；}
$（'ul.imgmodal li'）。在（'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”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
$（'#myModal'）.modal（'toggle'）；
var activSize=$（'ul.imagelist li.active'）；
$（'ul.imagelist li:lt（activSize）'）.addClass（'active'）；
});
//单击下一步
$（'.next'）。在（'click'，function（）上{
if（$（'ul.imgmodal li.activemodl'）.next（'ul.imgmodal li'）.exists（））{
var imgli=$（'ul.imgmodal li.activemodl'）。下一步（'ul.imgmodal li'）；
$（'ul.imgmodal li.activemodl'）.removeClass（'activemodl'）；
imgli.addClass（'activemodl'）；
imgadress=$（'ul.imgmodal li.activemodl'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}否则{
$（'ul.imgmodal li.activemodl'）.removeClass（'activemodl'）；
$（'ul.imgmodal li'）.first（）.addClass（'activemodl'）；
imgadress=$（'ul.imgmodal li.activemodl'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}
});
//单击prew
$（'.prev'）。在（'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'）；
上一个addClass（“活动”）；
imgadress=$（'ul.imgmodal li.active'）.find（“img:first”）.attr（“src”）；
$（'.modalimgimg'）.attr（'src'，imgadress）；
//警惕（imgadress）；
}否则{
$（'.modalimgimg'）。设置动画({
宽度：'100%'
});
$（'ul.imgmodal li.active'）.removeClass（'active'）；
$（'ul