views:

343

answers:

2

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.

A: 

Well, it looks like you're trying to push content into a div by setting its src attribute the way you would on an image, which isn't going to do anything. Possibly if it were an iframe that would be meaningful. Otherwise, you're going to have to get a bit fancier to pull description.php's content into the div, methinks.

chaos
+1  A: 

You'll have to use an AJAX get request, so do something like this:

<script language="javascript">
$(document).ready(function() {
    $("#whatisit a").click(function() {
        var descPath = $(this).attr("href");
        $.get(descPath, function(html_returned) {
            $("#zoom img").fadeOut("slow", function() {
                $("#description").html(html_returned).fadeIn("slow");
            });
        }, "html");
        return false;
    });
});
</script>

This should inject the contents of description.php into #description.

Johnny G
this did the trick (sort of!). :) There's just one problem - when I click on an image thumbnail (which when clicked loads a large image into #zoom), the "desription" text remains there. It should disappear.
Mo Boho
I added a fadeOut command to another jquery js script I had and the problem was resolved.Thank you to all for your help.
Mo Boho