I'm looking to achieve the following. I have an initially-empty absolutely positioned div (#description) sitting on TOP of another div (#zoom) which gets large images injected into it when users select one of the 15 or so thumbnails on the side of the page.
I have a link on the side such as:
<div id="whatisit"><a href="description.php"></div>
that when clicked should INJECT the "description.php" file contents into the #description div on the site. First, of course it would need to "fadeOut" what the contents of #zoom.
I have the following code which I tried to put together to do the job.
<script language="javascript">
$(document).ready(function() {
$("#whatisit a").click(function() {
var descPath = $(this).attr("href");
$("#zoom img").fadeOut("slow", function() {
$(this).attr({ src:descPath }).fadeIn("slow");
});
return false;
});
});
</script>
It fades out the contents of #zoom, but doesn't inject or fadeIn the "descriptions.php" file content. Am I doing something wrong? Or missing something?
Many thanks for any help.