title: bootstrap modal photo gallery
body: <p>I don't like admitting this, but I copied some code and I can't get it to work like it is supposed to work.  I've got a few images that I want to be displayed in a bootstrap modal and to be able to scroll through them.  Below is my html code as well as my javascript code.  I have the jquery and bootstrap all linked up correctly.</p>
  
  <pre><code>&lt;div class="row"&gt;  
    &lt;div class="col-md-2"&gt;&lt;/div&gt;
    &lt;div class="col-md-10"&gt;
      &lt;ul&gt;
          &lt;li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4"&gt;
              &lt;img class="img-responsive" src="img/gallery4.jpg"&gt;
          &lt;/li&gt;
          &lt;li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4"&gt;
              &lt;img class="img-responsive" src="img/gallery5.jpg"&gt;
          &lt;/li&gt;
          &lt;li class="cards col-lg-3 col-md-3 col-sm-3 col-xs-4"&gt;
              &lt;img class="img-responsive" src="img/gallery6.jpg"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&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;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And now the javascript code:</p>
  
  <pre><code>$(document).ready(function(){        
      $('li img').on('click',function(){
          var src = $(this).attr('src');
          var img = '&lt;img src="' + src + '" class="img-responsive"/&gt;';
  
          var index = $(this).parent('li').index();   
  
          var html = '';
          html += img;                
          html += '&lt;div style="height:25px;clear:both;display:block;"&gt;';
          html += '&lt;a class="controls next" href="'+ (index+2) + '"&gt;   &lt;b&gt;next&lt;/b&gt; &amp;raquo;&lt;/a&gt;';
          html += '&lt;a class="controls previous" href="' + (index) + '"&gt;&amp;laquo; &lt;b&gt;prev&lt;/b&gt;&lt;/a&gt;';
          html += '&lt;/div&gt;';
  
          $('#myModal').modal();
          $('#myModal').on('shown.bs.modal', function(){
          $('#myModal .modal-body').html(html);
  
          $('a.controls').trigger('click');
      })
          $('#myModal').on('hidden.bs.modal', function(){
          $('#myModal .modal-body').html('');
      });
  
  
  
  
     });  
  })
  
  
  $(document).on('click', 'a.controls', function(){
      var index = $(this).attr('href');
      var src = $('ul.row li:nth-child('+ index +') img').attr('src');             
  
  $('.modal-body img').attr('src', src);
  
      var newPrevIndex = parseInt(index) - 1; 
      var newNextIndex = parseInt(newPrevIndex) + 2; 
  
      if($(this).hasClass('previous')){               
          $(this).attr('href', newPrevIndex); 
          $('a.next').attr('href', newNextIndex);
      }else{
          $(this).attr('href', newNextIndex); 
          $('a.previous').attr('href', newPrevIndex);
      }
  
      var total = $('ul.row li').length + 1; 
      //hide next button
      if(total === newNextIndex){
         $('a.next').hide();
      }else{
          $('a.next').show()
      }            
      //hide previous button
      if(newPrevIndex === 0){
          $('a.previous').hide();
      }else{
          $('a.previous').show()
      }
  
  
      return false;
  });
  </code></pre>