Problem with .load() callback in a loop

Problem with .load() callback in a loop

Hello,

This is my first time posting, so please forgive any etiquette transgressions. Also I am a beginner/novice jquery user, so please take it easy on me.

What I am *attempting* to accomplish is queuing up a bunch of remote pages into a hidden div, with a bunch of sub-divs which contain the actual loaded content. I am loading these pages via the load() function in a for loop. Once the for loop completes a set of icons is displayed which when clicked shows the respective loaded content.

Everything works great, except when you click an icon as soon as the the icon appears,  the loaded content does not display. If you wait a second then click, all is well. This is my code, again I am a novice, and I anticipate alot of head shaking. I'll let the code speak for it self. It can be seen in action here - http://www.chrisfiskaa.com/test.php

The code:
  1. /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////   
    AJAX Gallery Sidebar code
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
        var $load_from;
        var $load_to;
        $("#accordion a.ajax").click(function(){
            var selected = $(this).attr("name"); //get name attribute of clicked
           
            $("#gallery_links li").removeClass("active"); //clear all active class    
            $("#gallery_links li." + selected).addClass("active"); //add active class to li matching name of clicked anchor

            $load_from = $(this).attr("href")+(" .content"); // get url to load from href attribute , concat class name - points to portion of remote doc to load   
            $load_to = $("#content_wrap .content");
            $load_to.fadeOut('fast', load_content); //fade out current content, make call to load function
            $("#content_wrap").prepend("<div class='page_loading'>Loading please wait</div>").fadeIn();
            return false;
        });

        function load_content(){
            $load_to.load($load_from,'', queueGallery).hide();
        }
       
        function queueGallery(){
            $("#gallery-queue").remove();
            var gallery_arr = $("#gallery_selection a");
            var gallery_length = gallery_arr.length;
            var num_loaded = 0;
            var load_complete;
            var to_load;
            $("html").append("<div id='gallery-queue'></div>");
            $("#gallery-queue").hide();
           
            for (i=0;i<gallery_length;i++){
                $(gallery_arr[i]).addClass('item' + i);
                $("#gallery-queue").append("<div class='item" + i + "'></div>");
            }
                   
                   
            for (i=0;i<gallery_length;i++){
                to_load = (gallery_arr[i] + " #gallery_content");
                $("#gallery-queue .item" + i).load(to_load, function (){
                    num_loaded += 1;   
                    load_complete = (num_loaded == gallery_length-1);
                    if (load_complete) {
                        show_content();
                    }
                });
            }
        }
           
        function show_content(){ //fades in content, hides loading message
            $load_to.fadeIn();
            $("#content_wrap div.page_loading").fadeOut();
        }
       
        queueGallery();

    /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////   
    AJAX Gallery navigation - lightbox style image loading
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
        $(".thumb_wrap a").live('click', function(){ //.live() function required because element may be loaded via ajax
            $("html").append("<div id='blanket'></div>"); //append transparent blanket overlay - css already display=none
            $("#blanket").fadeTo("fast", 0.8, function(){
                $("div.image_loading").append("Loading please wait").fadeIn();
            });
               
            //see gallery sub nav above for comments
            var to_load = $(this).attr('class');
           
            load_content();
           
            function load_content(){
            $("body").append("<div id='ajax_gallery'></div><div class='image_loading'><div>"); //appends div container to body - css takes care of position
            $("#ajax_gallery, div.loading").hide();
            $('#gallery-queue' + ' .' + to_load).clone().appendTo('#ajax_gallery');
            center_image();
            }
            function center_image(){
            var image_width = $("#ajax_gallery").width();
            var image_margin = Math.floor((960-image_width)/2);
            $("#ajax_gallery").css("margin", "0px" + " " + image_margin + "px");
            $("#ajax_gallery #gallery_content").append("<div id='close_window'>Exit [X]</div>");
            show_content();
            }
            function show_content(){
            $("#ajax_gallery").fadeIn(hide_loading_msg);
            }
           
            function hide_loading_msg(){
            $("div.image_loading").fadeOut(function(){
            $("div.image_loading").remove();
            });
            }
            return false;
        });

        $("#blanket, #close_window").live('click', function() { // click outside image area to close lightbox
            $("#blanket, #ajax_gallery").fadeOut(function (){
                $("#blanket, #ajax_gallery, div.loading").remove();
            });
    });