AJAX导航和扩展图像

Question

I have a site with a main page, index.php, with a into which I load content when a menu item in index.php is clicked, using JQuery Address.

In one of the pages loaded into #content, there are images which I use Highslide to expand. The trouble is when the image expands over the boundary of the #content div, this div gets emptied and replaced with gibberish (����JFIF etc.).

Is there any way to have an zoomable image using this AJAX navigation?

EDIT: It works if I duplicate the Highslide code and reload JQuery within the page loaded into the #content div:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<link rel="stylesheet" href="js/highslide/highslide.css" type="text/css" />
<script src="js/highslide/highslide.js" type="text/javascript"></script>
<script type="text/javascript">
    hs.graphicsDir = 'js/highslide/graphics/';
</script>

but this then means that these js calls are being made twice on the page, and for a reason I'm not clear on, this means that the other jquery scripts on index.php, including Address, don't work any more... Any help would be hugely appreciated!

Answer 1

I was missing something obvious. The tag that wrapped every image to be expanded was being picked up by my Address call, which I had automatically attached to every tag. So I just added a class for the images and excluded it from the call:

$('a:not(a.img)').livequery('click',function() {  
    $.address.value($(this).attr('href'));  
    return false;
});