jquery image slider gallery
<p>I'm trying to add images dynamically im my preview element.So when I click a thumbnails image will load and slide.</p>

<pre><code>&lt;div id="imageGallery"&gt;
    &lt;div id="loading"&gt;&lt;/div&gt;
    &lt;a class="thumbnail"&gt;&lt;img alt="Image 1" src="../../baContent/image1.jpg" /&gt;&lt;/a&gt;
    &lt;a class="thumbnail"&gt;&lt;img alt="Image 2" src="../../baContent/image2.jpg" /&gt;&lt;/a&gt;
    &lt;div id="preview"&gt;
        &lt;img id="mainImage" alt="Main Image" src="../../baContent/image1.jpg" /&gt; 
    &lt;/div&gt;
&lt;/div&gt;

 $(document).ready(function () {
        $("#loading").show();
        var oldImage = $("#preview img:first");
        var newImage = $("#mainImage").insertAfter(oldImage).css('position', 'absolute').css('left', 800);
        newImage.load(function () {
            $("#loading").hide();
            oldImage.css({ left: 0 }).animate({ left: -800 });
            newImage.css({ left: 800 }).animate({ left: 0 });
            oldImage.remove();
        });
});
</code></pre>

<p>My idea is to insert image dynamically after the first image and old image will remove. I try to many functions append,insertTo. But it is not working.Thanks advice :)</p>
