title: Add next and previous button to Lightbox
body: <p>I am displaying some images on my picture gallery page.</p>
  
  <p>On this page I am using a jquery lightbox to display images.</p>
  
  <p>The lightbox is working fine,but it doesn't have next and previous buttons .
  How can I add the next and previous buttons on those pages.</p>
  
  <p>There are number of pages having the lightbox so I don't want a major change.
  Can anyone suggest me how can I add next and previous buttons with little changes ?</p>
  
  <p>Here is my aspx page code :</p>
  
  <pre><code> &lt;div class="row"&gt;
   &lt;div class="col-xs-12  col-md-3"&gt;
          &lt;a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"&gt; 
                &lt;img src="9.jpg" alt="..." class="styleforimg"/&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 col-md-3"&gt;
          &lt;a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"&gt; 
                &lt;img src="10.jpg" alt="..." class="styleforimg"/&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12  col-md-3"&gt;
          &lt;a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"&gt; 
           &lt;img src="11.jpg" alt="..." class="styleforimg"/&gt;
          &lt;/a&gt;
      &lt;/div&gt;
        &lt;/div&gt;
  
  &lt;div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;img src="&lt;%= ResolveUrl("~") %&gt;Images/logo.png"  alt="" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the javascript file code:</p>
  
  <pre><code>  $(document).ready(function () {
        var $lightbox = $('#lightbox');
  
        $('[data-target="#lightbox"]').on('click', function (event) {
            var $img = $(this).find('img'),
                src = $img.attr('src'),
                alt = $img.attr('alt'),
                css = {
                    'maxWidth': $(window).width() - 100,
                    'maxHeight': $(window).height() - 100
                };
  
            $lightbox.find('.close').addClass('hidden');
            $lightbox.find('img').attr('src', src);
            $lightbox.find('img').attr('alt', alt);
            $lightbox.find('img').css(css);
        });
  
        $lightbox.on('shown.bs.modal', function (e) {
            var $img = $lightbox.find('img');
  
            $lightbox.find('.modal-dialog').css({ 'width': $img.width() });
            $lightbox.find('.close').removeClass('hidden');
        });
    });
  </code></pre>