jQuery for ASP.NET Developers

JavaScript Source

jQuery(function() {

    /****************************************************
    *              Initialization Section               *                
    ****************************************************/
    // setting this up so it can be served by AJAX later
    var images = [
       { src: 'http://jquery.theaccidentalgeek.com/images/0470171165.jpg' },
       { src: 'http://jquery.theaccidentalgeek.com/images/0470438701.jpg' },
       { src: 'http://jquery.theaccidentalgeek.com/images/0470457337.jpg' },
       { src: 'http://jquery.theaccidentalgeek.com/images/0470462577.jpg' }
    ];

    var $images = $convertImages(images),
    $transition = $('<img src="http://jquery.theaccidentalgeek.com/images/FadeEffect.png" />'),
    $frame = $("#frame");

    $frame
        .css({ position: 'relative', overflow: 'hidden' })
        .append($transition);

    var leftX = "0px",
    centerX = "0px",
    topY = "0px",
    idx = 0;

    InitializeTransitionImage();

    $transition.css({ position: 'absolute', top: topY, left: leftX });

    // Make sure we start the page with an image
    $frame.prepend($images.eq(idx++));

    /****************************************************
    *                 Animation Section                 *                
    ****************************************************/
    $("#start").click(function() {
        InitializeTransitionImage();
        
        $transition
            .animate({ 'left': centerX }, 750, 'swing', function() {
                $frame.prepend($images.eq(idx++));
                if (idx == $images.length) idx = 0;
            })
            .animate({ 'left': $frame.width() + "px" }, 250, function() {
                $transition.css({ "top": topY, "left": leftX });
            });
    });

    function InitializeTransitionImage() {
        if (leftX[0] != '-' || topY[0] != '-') {
            leftX = (0 - $transition.width()) + "px";
            centerX = (($frame.width() / 2) - ($transition.width() / 2)) + "px";
            topY = (($frame.height() / 2) - ($transition.height() / 2)) + "px";
        }
    }
});

function $convertImages(images) {
    var container = '<div id="imageContainer" style="display:none" >';
    for (var i = 0; i < images.length; i++) {
        var img = images[i];
        var attribs = '';

        jQuery.each(img, function(i, n) {
            attribs += i + '="' + n + '" ';
        });

        container += '<img ' + attribs + '/>';

    }
    container += '</div>';
    $('body').append(container)
    return $('#imageContainer>*')
}