[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.