title: jquery image gallery slide animation
body: <p>I am trying to make a simple image gallery like this. <a href="http://dimsemenov.com/plugins/royal-slider/#image-gallery" rel="nofollow">http://dimsemenov.com/plugins/royal-slider/#image-gallery</a>  When I click a thumbnail image, image element will create and  loading image will appear a little time and created element  will slide in the visible area.At last old image elment will remove.</p>
  
  <pre><code>&lt;div id="imageGallery" style="overflow:visible;display:block;"&gt;
  &lt;div class="preview"&gt;
      &lt;div id="content" style="width:640px;height:420px;"&gt;
           &lt;img id="main-Image" alt="" src="../../baContent/image1.jpg" style="display:inline; top:0;left:0;" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="thumbnails"&gt;
      &lt;a class="thumbnail" href="../../baContent/image1.jpg"&gt;&lt;img alt="Image 1" src="../../baContent/image1-thumb.jpg"&gt;&lt;/a&gt;
      &lt;a class="thumbnail" href="../../baContent/image2.jpg"&gt;&lt;img alt="Image 2" src="../../baContent/image2-thumb.jpg"&gt;&lt;/a&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(document).ready(function () {
      $(".thumbnail").click(function () {
          $("#mainImage").animate({ "left": "-640px" }, "fast");
          $('#preview').css('background-image', "url('../../baContent/spinner.gif')");
          var img = $("&lt;img style='left:640px;display:none;' /&gt;").attr('src', this.href).load(function () {
              $('#mainImage').attr('src', img.attr('src'));
              $('#preview').css('background-image', 'none');
              $(this).parent().prevAll().remove();
              $("#mainImage").animate({ "left": "-640px" }, "fast");
          });
  
      });
  
  });
  </code></pre>
  
  <p>I wrote a few code but had no success. Any ideas or tutorials?</p>