jquery - image preview on bootstrap modal -
$(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 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>after loading document displays 3 images, whenever click on image, image preview displayed in bootstrap modal , if click next or prev, these options work. when close modal 1 image displayed.
i got answer change 3 lines of jquery after $('#mymodal').modal('toggle'); line adde 3 lines code , change active varible activemodl[ updated fiddle link here][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 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> updated fiddle [1]: http://jsfiddle.net/yogeshdv/yekat/591/
Comments
Post a Comment