title: jQuery gallery with thumbnails, click function only working once
body: <p>I am working on a simple jQuery image gallery with thumbnails.</p>
  
  <p>Part of the functionality I want for this is that if you click on the currently showing main gallery slide, <code>.show</code>, it removes the class of <code>show</code>, fades out and THEN fades in the next slide and adds a class of <code>show</code> to it. The relevant thumbnails also change class from inactive to active or vice versa.</p>
  
  <p>The jQuery I am using for this is:</p>
  
  <pre><code>$( document ).ready(function() {
  
      $('.gallery-images .show').click(function() {
          $('.gallery-images .show').removeClass('show').fadeOut(300, function() {
              $(this).next().fadeIn(500).addClass('show');
          });
          $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
      });
  
  });
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div id="gallery-71" class="content gallery gallery-71"&gt;
      &lt;div id="gallery-images-wrapper"&gt;
          &lt;div class="gallery-images"&gt;
                      &lt;div class='gallery-image show' id='gallery-image-72'&gt;
                          &lt;img src="http://placekitten.com/g/300/200" /&gt;
                          &lt;div class='caption'&gt;1st caption&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='gallery-image' id='gallery-image-73' style='display:none'&gt;
                          &lt;img src="http://placekitten.com/g/300/200" /&gt;
                          &lt;div class='caption'&gt;2nd caption&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='gallery-image' id='gallery-image-74' style='display:none'&gt;
                          &lt;img src="http://placekitten.com/g/300/200" /&gt;
                          &lt;div class='caption'&gt;3rd caption&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='gallery-image' id='gallery-image-75' style='display:none'&gt;
                          &lt;img src="http://placekitten.com/g/300/200" /&gt;
                          &lt;div class='caption'&gt;4th caption&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='gallery-image' id='gallery-image-76' style='display:none'&gt;
                          &lt;img src="http://placekitten.com/g/300/200" /&gt;
                          &lt;div class='caption'&gt;5th caption&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='gallery-image' id='gallery-image-77' style='display:none'&gt;
                          &lt;img src="http://placekitten.com/g/300/200" /&gt;
                          &lt;div class='caption'&gt;6th caption&lt;/div&gt;
                      &lt;/div&gt;
          &lt;/div&gt;&lt;!--.gallery-images--&gt;
      &lt;/div&gt;&lt;!--#gallery-images-wrapper--&gt;
      &lt;div id="gallery-thumbs-wrapper"&gt;
          &lt;ul class="gallery-thumbs noscript"&gt;
              &lt;li class='gallery-thumb active' id='gallery-thumb-72'&gt;&lt;img src="http://placekitten.com/g/50/50" /&gt;&lt;/li&gt;
              &lt;li class='gallery-thumb inactive' id='gallery-thumb-73'&gt;&lt;img src="http://placekitten.com/g/50/50" /&gt;&lt;/li&gt;
              &lt;li class='gallery-thumb inactive' id='gallery-thumb-74'&gt;&lt;img src="http://placekitten.com/g/50/50" /&gt;&lt;/li&gt;
              &lt;li class='gallery-thumb inactive' id='gallery-thumb-75'&gt;&lt;img src="http://placekitten.com/g/50/50" /&gt;&lt;/li&gt;
              &lt;li class='gallery-thumb inactive' id='gallery-thumb-76'&gt;&lt;img src="http://placekitten.com/g/50/50" /&gt;&lt;/li&gt;
              &lt;li class='gallery-thumb inactive' id='gallery-thumb-77'&gt;&lt;img src="http://placekitten.com/g/50/50" /&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;!--.gallery-thumbs--&gt;
      &lt;/div&gt;&lt;!--#gallery-thumbs-wrapper--&gt;
  &lt;/div&gt;&lt;!--gallery--&gt;
  </code></pre>
  
  <p>Currently this only works the first time you click on the main image, but after that it doesn't seem to be registering anything when I click on the second slide.</p>
  
  <p>Any help would be really appreciated, thanks.</p>
  
  <p>Demo here: <a href="http://jsfiddle.net/fFunx/1/" rel="nofollow">http://jsfiddle.net/fFunx/1/</a></p>