buggy gallery in opera an safari

buggy gallery in opera an safari

I have a gallery which loads in and animates content based on different navigation selections.  there is also a background image which changes on click.  I've just found that on opera and safari, the appropriate images aren't always loaded.  When you click the navigation, it loads a set of  subnavigation(via load() method), which then links to specific images.  My issue, is that sometimes, the navigational items, when clicked, load in the appropriate content from the previous set of navigational items.  It only does it sometimes, so it makes it tough for me to see if its a problem with my code or...

To get a better idea, check it out at brianbattenfeld.com/fingers/

let me know what anyone thinks.  Keep in mind this is Opera, and Safari specific, and only happens sometimes, so if you don't notice right away, click a few more times (usually happens after clicking the second level navigation).  Code is also below.


$(document).ready(function() {

    // Check for hash value in URL
    var hash = window.location.hash.substring(1);
    var href = $('#project_navigation ul li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
$(this).addClass("current");
            var content = hash+ '.php #work';
            var subnavigation = hash+'.php #project_subnavigation';
            var gallery = hash + '.php #showcase_holder';
            var copy = hash + '.php #inner_holder';
            $('#bg').addClass(hash + 'bg');
            $('#content').load(content);
        }
    });

    $('#showcase_holder ul li:first').addClass("in_view");

    $('#project_navigation ul li a').live('click', function(){
url = $(this).attr("href");
        urlName = $(this).attr('href').substr(0,$(this).attr('href').length-4);
$('#project_subnavigation ul').hide().load(url + " #project_subnavigation ", function() {
            $('#project_subnavigation ul').fadeIn(400);
            
            
        });

        window.location.hash = urlName;

        $('#inner_holder').load(url + " .details", function() {
        name = $('#project_subnavigation ul li a:first').attr("rel");
        nextImage = '../images/port/' + name + '.jpg';
        $('#showcase_holder ul').append('<li><img src="' + nextImage + '" /></li>').
        animate({left: '-=618'}, 500);

name = $('#project_subnavigation ul li a:first').attr("rel");
nextBg = name.substring(0,name.length - 1) + 'bg.jpg';
$('#bg').removeClass();
$('#bg').css('background-image', 'url(../images/backgrounds/' + nextBg + ')');
        });

        $('#project_navigation ul li a.current').removeClass("current");
        $(this).addClass("current");//"current" navigation
        return false;
});




    $('#project_subnavigation ul li a').live('click', function(){
        section = $(this).attr("rel");
        new_image = '../images/port/' + section + '.jpg';
        $('#project_subnavigation ul li a.current').removeClass("current");
        $(this).addClass("current");

        $('#showcase_holder ul').append('<li><img src="' + new_image + '" /></li>').
        animate({left: '-=618'}, 500);

        //$('#inner_holder').hide(200, function(){
            //$('.hidden').removeClass("hidden");
            $('.active').addClass("hidden").removeClass("active");
            $('#' + section).removeClass("hidden").addClass("active");
        //});

        return false;
    });


});