[jQuery] click thumbnail show large image in separate div, slide up image description in another div

Situation.

I have several thumbnails next to a div with id of 'image holder'. Under
that is another div with id of 'msg_body'. image_holder already shows first
thumbnail's large view image and msg_body already shows first thumbnails
description on page load.

I want to be able to click next thumbnail and have that large image fade in
the img-holder replacing previous and have new description slide up
replacing previous msg_body and so on with each thumbnail click. I should be
able to just click around on thumbnails and have large image show as well
that images's description slide up and show.

I have managed to get the img change function on thumbnail click to work and
the msg_body slide to work on thumbnail click and I've even managed to get
the image to change and the text to slide up on first click but I can't get
them to work together correctly at the same time.

I am relatively new to jquery and after four days of trying it every which
way -- I am wondering if someone can help.

here is one of the thumbnails

<li> large image path here image thumb path here </li>

//This is the msg_body slide up

$(document).ready(function(){



//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets slided
$("a.largeImage").click(function()
{

$('.msg_body').slideUp("slow");
$($(this).attr("href")).slideDown("slow");
});

});

This is the img change

$(function() {

$("#section_select a").click(function()
{

var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")");

return false;

});
});

--
View this message in context: http://www.nabble.com/click-thumbnail-show-large-image-in-separate-div%2C-slide-up-image-description-in-another-div-tp22265586s27240p22265586.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.