jquery image gallery slide animation
<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>
