Hi everyone,

I am working on a little website project for a family member of mine. I need to make a simple gallery for the site. Basically, a placeholder image with thumbnails. When you click on a thumbnail it replaces the placeholder. Also there is a paragraph for a description of the image. I just started using JQuery and pretty much Javascript in general, so I am not too familiar with the way to do this.

What I have so far is that I can click a thumbnail and it updates the placeholder image. I cannot get the paragraph to update with the image description though. My markup is as follows:


<ul id="thumbnails">
<li><a href="bigimage.jpg?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><img src="thumbnail.jpg" /></a><p>description for the image, to be displayed in description paragraph</p></li>
</ul>

<img id="bigImg" src="bigimage.jpg" />

<p id="description">description of the image</p>




My Javascript so far is as follows:

$(document).ready(function() {
$("#thumbnails > li > a").click(function() {
$("#bigImg").attr({src: (this.href)});
$("#description").text(this.parent().p.text);
return false;
});
});


As I said, the image updates, but the paragraph text doesn't update. Does anyone have an idea on how to fix this? Thank you very much for your help