Jquery Gallery with image description

I have found this great piece of code that makes the creation of a gallery with thumbnails very easy, the problem is that I would like to take the text from the alt description in the image tag and make it a description ecery time a thumbnail is clicked… I know it is very easy… nut not for a newbie in javascript and Jquery… any hekp trully appreciated.

The javascript

$(".items img").click(function() {
		
			// see if same thumb is being clicked
			if ($(this).hasClass("active")) { return; }
			// calclulate large image's URL based on the thumbnail URL (flickr specific)
			var url = $(this).attr("src").replace("-150x150", "");
			// get handle to element that wraps the image and make it semi-transparent
			var wrap = $("#image_wrap").fadeTo("medium", 0.5);
			// the large image from www.flickr.com
			var img = new Image();
		
			// call this function after it's loaded
			img.onload = function() {
				// make wrapper fully visible
				wrap.fadeTo("fast", 1);
				// change the image
				wrap.find("img").attr("src", url);
			};
			// begin loading the image
			img.src = url;
			// activate item
			$(".items img").removeClass("active");
			$(this).addClass("active");
		
		// when page loads simulate a "click" on the first image
		}).filter(":first").click();

and the html generated by wordpress

<div class="gallery">
					<div id="image_wrap">
						<img src="blank.gif"/>
						<div id="title"><h1>Photos</h1></div>
					</div>
				</div><!-- end gallery -->



			
			
				<a class="prev browse left"></a>
				<div class="scrollable">   
				<div class="items">
				<div><img width="150" height="150" src="http://www.example.com7-150x150.jpg" class="attachment-filexthumbnail" alt="7" title="7" /></div><div><img width="150" height="150" src="http://www.example.com6-150x150.jpg" class="attachment-filexthumbnail" alt="6" title="6" /></div><div><img width="150" height="150" src="http://www.example.com5-150x150.jpg" class="attachment-filexthumbnail" alt="5" title="5" /></div><div><img width="150" height="150" src="http://www.example.com4-150x150.jpg" class="attachment-filexthumbnail" alt="4" title="4" /></div><div><img width="150" height="150" src="http://www.example.com3-150x150.jpg" class="attachment-filexthumbnail" alt="3" title="3" /></div><div><img width="150" height="150" src="http://www.example.com2-150x150.jpg" class="attachment-filexthumbnail" alt="2" title="2" /></div><div><img width="150" height="150" src="http://www.example.com1-150x150.jpg" class="attachment-filexthumbnail" alt="1" title="1" /></div>				</div>
				</div>
				<a class="next browse right"></a>

Thanks in advance

The alt text should not be used for a description. The alt text is what the browser should show when the image is not available.

You can use the title text instead to place a description of the image.

Thank you Paul.

I agree with you that I should use title instead of alt for the description, but even so my problem still remains. I don’t know how to use jquery in the code I wrote, in order to grab the title and make it am html element h1 b or anything

Here is where the HTML stuff for the image occurs.


<div id="image_wrap">
    <img src="blank.gif"/>
    <div id="title"><h1>Photos</h1></div>
</div>

The thumbnail image is where you would update the title attribute, so that it can be used when the full-size image is loaded.

You’ll want to manage the image title in the same place that the image url is managed. For example:


// calculate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("-150x150", "");

[color="green"]var title = this.title;[/color]

The url and title can then be made use of once the image has loaded:


// call this function after it's loaded
img.onload = function() {
    // make wrapper fully visible
    wrap.fadeTo("fast", 1);

    // change the image[color="green"] and title[/color]
    wrap.find("img").attr("src", url);
    [color="green"]wrap.find('h1').html(title);[/color]
}