title: image preview on bootstrap modal
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function(){
      jQuery.fn.exists = function(){console.log(this);return this.length&gt;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&lt;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&gt;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);
              }
          });
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
  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;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="mainone text-center"&gt;
      &lt;ul class="imagelist list-inline text-center imgmodal"&gt;
      &lt;li&gt;&lt;img src="images/img2.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img3.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img7.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img5.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img7.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img8.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img2.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img3.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img2.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img5.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img7.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/img8.jpg"&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;span class="loadmore"&gt;&lt;h3&gt;load more&lt;/h3&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
      &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
     &lt;div class="modal-body modalimg"&gt;
      &lt;img src="images/6.jpg"&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
     &lt;h3&gt;&lt;span class="prev pull-left"&gt;prev&lt;/span&gt;&lt;span class="pull-right clearfix next"&gt;next&lt;/span&gt;&lt;span class="cler"&gt;&lt;/span&gt;&lt;/h3&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After loading the document displays three images, whenever i click on the image, an image preview will be displayed in a bootstrap modal and if i click next or prev,  these options also work. However when I close the modal only one image is displayed. </p>