jQuery图像滑块库

Question

I'm trying to add images dynamically im my preview element.So when I click a thumbnails image will load and slide.

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

 $(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();
        });
});

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 :)

Answer 1

You're thinking too complicated, I guess...

$(document).ready(function(){
    $(".thumbnail").click(function(){
        $("#loading").show();
        // Create new image instance
        $("<img/>", {
            // Get source of image to load
            src: $(this).find("img").attr("src")
        }).css({
            position: "absolute",
            left: 800
        }).load(function(){
            $("#loading").hide();
            // Append new image to preview div
            $("#preview").append($(this));
            // Get current image and animate it
            $("#preview").find("img:first").css({
                position: "absolute"
            }).animate({
                left: -800
            }, function(){
                // Remove the image when animation complete
                $(this).remove();
            });
            // Animate new image
            $(this).animate({
                left: 0
            }, function(){
                // Do something interesting...
            });
        });
    });
});

Test it here: http://jsfiddle.net/dpzdL/