Extracting alt attribute from image into div (Gallery description purpose)

Question

So i have this mini gallery. This is how i want it to work: img BIG IMAGE img div description div img thumbnails img

Everyting works fine except i don't know if i'm extracting alt value correctly into div. Code inc:

HTML SAMPLE:

<p><img id="largeImg" src="zdjecia/bawialnia.jpg" alt="Large image" /></p> 
  <div id="opis"></div>
<p class="thumbs">

 <a href="zdjecia/bawialnia.jpg" title="Bawialnia"><img src="zdjecia/bawialnia-thumb.jpg" alt="some description" /></a>

Jquery:

$(document).ready(function(){

 $("h2").append('<em></em>')

 $(".thumbs a").click(function(){

   var largePath = $(this).attr("href");
   var largeAlt = $(this).attr("title");

   var altText = $(this).attr("alt");


   $("#largeImg").attr({ src: largePath, alt: largeAlt });

   $("div#opis").html(altText);

   $("h2 em").html(" (" + largeAlt + ")"); return false;
 });

});

Thanks in advance!

Answer 1

Using $(this).attr("alt") in that context is returning the alt attribute of the a tag, not the child img.

Try this:

var altText = $(this).find('img').attr('alt');