title: how to add view more button to bootstrap image gallery using jquery
body: <p>I have an image gallery built using bootstrap html. But i want one button view more after 2-3 images in gallery To view full or all images in gallery. After clicking on button then pop up the image as bootstrap lightbox gallery</p>
  
  <p>I have tried following code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;title&gt;aaa&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css" /&gt;
   &lt;script src="js/jquery-2.1.1.js"&gt;&lt;/script&gt;
   &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="photo-gallery.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;style&gt;
        ul {         
            padding:0 0 0 0;
            margin:0 0 0 0;
        }
        ul li {     
            list-style:none;
            margin-bottom:25px;           
        }
        ul li img {
            cursor: pointer;
        }
        .modal-body {
            padding:5px !important;
        }
        .modal-content {
            border-radius:0;
        }
        .modal-dialog img {
            text-align:center;
            margin:0 auto;
        }
      .controls{          
          width:50px;
          display:block;
          font-size:11px;
          padding-top:8px;
          font-weight:bold;          
      }
      .next {
          float:right;
          text-align:right;
      }
        /*override modal for demo only*/
        .modal-dialog {
            max-width:500px;
            padding-top: 90px;
        }
        @media screen and (min-width: 768px){
            .modal-dialog {
                width:500px;
                padding-top: 90px;
            }          
        }
        @media screen and (max-width:1500px){
            #ads {
                display:none;
            }
        }
    &lt;/style&gt;
    &lt;body&gt;    
      &lt;div class="container"&gt;    
          &lt;div class="row"&gt;
     &lt;div class="col-sm-3"&gt;
      
     &lt;/div&gt;
     &lt;div class="col-sm-9"&gt;
      &lt;ul class="row"&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-460760-colors-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-916206-legal-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-3807845-food-s.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-5771958-health-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg"&gt;
       &lt;/li&gt;
       &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
        &lt;img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg"&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
      
       
      &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;         
            &lt;div class="modal-body"&gt;                
            &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
      
    &lt;/body&gt;
   
  
    
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>please help me for this issue.</p>