CodingForums.com - Jquery / Fancybox / farinspace glitch

Hi,

I've created a photo gallery which has the thumbnails in a div below a preview area div. Once a thumbnail is clicked, the preview area shows a larger version of the thumbnail image. I'm using both fancy box and farinspace.

The small glitch I have is that when changing images, there is a moment when the thumbnail bar is being displayed in the preview area. It's brief, but annoying, and I can't figure it out.

Occassionally, the problem isn't visible, so I assume the problem is with the pre-load.

www.artmarcsimon dot com

Thanks

Javascript

Code:

// JavaScript Document



    $(document).ready(function(){                  

    $('.gallery_thumbnails a').click(function(e){

                                             

    e.preventDefault();

    // set up vars from thumbnail   

    var photo_caption = $(this).attr('title');   

    var photo_fullsize = $(this).attr('href');

    var photo_preview = photo_fullsize.replace('_fullsize','_large');

   

    $('.gallery_preview').fadeOut(200, function(){

   

        $('.gallery_preload_area').html('<img src="'+photo_preview+'"/>');

        $('.gallery_preload_area img').imgpreload(function(){

                                                      

            $('.gallery_preview').html('<a class="overlayLink" href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');

            $('.gallery_caption').html('<p>'+photo_caption+'</p>');                                           

            $('.gallery_preview').fadeIn(200);   

           

            setFancyboxLinks();

            updateThumbnails();

       

        });

   

   

   

        });   

   

    });                                                                    

   

    // initialize gallery on load

    var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');   

    var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');

    var first_photo_preview = first_photo_fullsize.replace('_fullsize','_large');

   

    $('.gallery_preview').fadeOut(200, function(){

   

            $('.gallery_preload_area').html('<img src="'+first_photo_preview+'"/>');

            $('.gallery_preload_area img').imgpreload(function(){

                                                      

                $('.gallery_preview').html('<a class="overlayLink" href="'+first_photo_fullsize+'" title="'+first_photo_caption+'" style="background-image:url('+first_photo_preview+');"></a>');

                $('.gallery_caption').html('<p>'+first_photo_caption+'</p>');                                           

                $('.gallery_preview').fadeIn(200);   

           

                setFancyboxLinks();

                updateThumbnails();

       

            });

   

    });   

   

});

   

   

function setFancyboxLinks(){

   

    $('a.overlayLink').fancybox({

                               

        'titlePosition' : 'inside',

        'overlayColor' : '#000',

        'overlayOpacity' : 0.8,

        'transitionOut' : 'none',

        'transitionIn' : 'none',

        'autoScale' : true

   

    });

   

}



function updateThumbnails(){

   

    $('.gallery_thumbnails a').each(function(){

       

        if ( $('.gallery_preview a').attr('href') == $(this).attr('href') ){

            $(this).addClass('selected');

            $(this).children().fadeTo(250, .4);

        }else{   

            $(this).removeClass('selected');

            $(this).children().css('opacity', '1');

           

        }

                                             

    });