Hi, I have a site w/ an image gallery ("Portfolio") page. There is drop-down navigation that allows a user to view a specific image in the portfolio from any page on the site. The links in the navigation use a hash, and that hash is read and converted into a string of an image filename. The image src attribute on the /portfolio/ page is then swapped out with the new image filename.

This works fine if I'm clicking the dropdown link from a page OTHER THAN the /portfolio/ page itself. However if I take the same action from the /portfolio/ page, I get a "too much recursion" error in Firefox. Here's the code:

Snippet of the nav markup:

<li>Portfolio Category A
  <ul>
      <li><a href="/portfolio/#dining-room-table">Dining Room Table</a></li>
      <li><a href="/portfolio/#bathroom-mirror">Bathroom Mirror</a></li>

  </ul>
</li>

JS that reads the hash, converts it to an image filename, and swaps out the image on the page:

$(document).ready(function()
{
    if(location.pathname.indexOf("/portfolio/") > -1)
        {
            var hash = location.hash;
            var new_image = hash.replace("#", "")+".jpg";
            swapImage(new_image);
        }
});

function swapImage(new_image)
{
    setTimeout(function()
    {
        $("img#current-image").attr("src", "/images/portfolio/work/"+new_image);
    }, 100);
}

I'm using the setTimeout function because I'm fading out the old image before making the swap, then fading it back in. I initially thought this was the function that was causing the recursion error, but when I remove the setTimeout I still have this problem.

Does this have to do with a closure I'm not aware of? I'm pretty green on closures.

JS that listens for the click on the nav:

$("nav.main li.dropdown li ul li").click(function()
{
    $(this).find("a").click();
    $("nav.main").find("ul ul").hide();
    $("nav.main li.hover").removeClass("hover");
});

I haven't implemented the fade in/out functionality for the dropdown nav yet, but I have implemented it for Next and Previous arrows, which can also be used to swap out images using the same swapImage function. Here's that code:

$("#scroll-arrows a").click(function()
{

    $("#current-image").animate({ opacity: 0 }, 100);

    var current_image = $("#current-image").attr("src").split("/").pop();
    var new_image;
    var positions = getPositions(current_image);

    if($(this).is(".right"))
    {
        new_image = positions.next_img;
    }
    else
    {
        new_image = positions.prev_img;
    }

    swapImage(new_image);

    $("#current-image").animate({ opacity: 1 }, 100);

    return false;
});

Here's the error I'm getting in Firefox:

too much recursion
var ret = handleObj.handler.apply( this, arguments );
jquery.js (line 1936)

Thanks for any advice.