2
предварительный просмотр изображения на начальной загрузки модальный
$(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">×</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>После загрузки документа отображается три изображения, каждый раз, когда я нажмите на изображение, предварительный просмотр изображения будет отображаться в загрузочном модальный и если я нажимаю следующий или предыдущий, эти варианты также работают. Однако, когда я закрываю модальный режим, отображается только одно изображение.
после появления модального и закрыть его, вы получите одно изображение, где, если вы нажмете на «Все 14 изображений, показ ...», то снова ваши изображения загрузятся обратно. Проверьте его и попробуйте использовать window.reload или установите время, как только вы закроете модальный, чтобы перейти к первым трем изображениям , –
http://jsfiddle.net/YogeshDV/YEkAt/586/ –
это обновленная ссылка –