title: Custom lightbox, next button wont work more than once
body: <p>My gallery has thumbnails which all have a corresponding larger images with the same name, I linked each thumb to its larger image dynamically using php. Then i used jQuery to display the bigger image using the href attribute, to obtain the path to the large image. When the lightbox pops up, and next is clicked it should allow me to go through and view each image, instead when next is clicked only once it goes to the next image but if next is clicked again the it shows the same image. </p>
  
  <p>I have attached images to give a basic idea, since I am not that good at explaining. </p>
  
  <p>dynamically loaded thumbnails in my gallery:
  <img src="https://i.stack.imgur.com/Le7dq.png" alt=""></p>
  
  <p>when the last thumb in the gallery is clicked, this pops up (picture of the building):
  <img src="https://i.stack.imgur.com/BTHD6.jpg" alt=""></p>
  
  <p>When next is clicked this photo(bursting bubble) is diplayed, however when next is clicked several times, this photo(bursting bubble) remains:
  <img src="https://i.stack.imgur.com/rnGY2.jpg" alt=""></p>
  
  <p>My Code:</p>
  
  <pre><code>var Picture = $('.lightbox'); // path to full sized picture the class lightbox identifies a link &lt;a&gt;
  var pic = Picture.index(this) //finds index
  var num = Picture.length;//finds the total amount of thumbnails
  
  $('#next').click(function(e){ //when next is click prevent default
      e.preventDefault(); 
  
      if(pic&lt;(num-1)){ 
      var ntx = (pic)+1;
  }
  if(pic == (num-1)){ 
      ntx= 0;
  }
  var nxt = Picture[ntx]; 
  var img = $('.box img'); 
  img.remove();
  $('.box').hide(); // removes the current image
  
  $('.box').append('&lt;img align="center" id="motown" src="'+nxt+'" style=" z-index:52px;" &gt; '); //appends the next image and sets the div container to hidden and hide the new image
  
  
      });
  </code></pre>
  
  <p>What could I add to my code to make the next button work every time? </p>