Getting an attribute value from a parent function in jquery
<p>I'm new to jquery, so please forgive, well... everything!</p>

<p>I have a 'header bar' made up of about 10 small thumbnail-style images. I would like to be able to click on these images which would then change a larger side-bar image to show a larger version.</p>

<p>Which, with some fiddling about, I seemed to manage by using the following code for the images: </p>

<pre><code>&lt;img src="header_images\small1.jpg" alt="alttext"  class="hdrimage" id="1" data-bigimage="big1.jpg" /&gt;
&lt;img src="header_images\thumb2.jpg" alt="alttext"  class="hdrimage" id="2" data-bigimage="bigger2.jpg" /&gt;
</code></pre>

<p>etc...</p>

<p>I then added some jquery code at the bottom of the page:</p>

<pre><code>$(".hdrimage").bind('click', function() {
  $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));     
})
</code></pre>

<p>I'm not sure if that was the best way to do it, but it seems to work fine.</p>

<p>I then thought it would be nice to fade-out the old image and fade-in the new one, so added a  .fadeOut("slow"); to the click event, but on testing it doesn't wait until the fade is complete before it swaps the image.
Thanks to Google, I discovered I need to use a callback function on the .fadeOut to achieve this, so I tried something like:</p>

<pre><code>$(".hdrimage").bind('click', function() {
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));
    })
})
</code></pre>

<p>But this no longer works. I'm fairly sure it's because the $(this) is now referring to #swappyimage rather than the .hdrimage that was clicked. I can't figure-out how to reference the attribute I need from the thumbnail (.hdrimage) that is clicked to trigger the whole thing, so would appreciate some help.</p>

<p>I hope I explained that well enough! </p>
