jQuery on image click reveal text desc in div

Question

I have created a page that lists a group on thumbs on the right hand side of the page. When an thumb is clicked the relevant image is shown in a div to its left. Now I am trying to show the images description that matches said image. So far my working is as follows;

jQuery//

<!-- Swap portfolio image on click -->
$("ul.thumbs li a").click(function() { 
var mainImage = $(this).attr("href"); //Find Image Name
$(".work_two_third_column_copy img").attr({ src: mainImage });
return false;  
});

<!-- Get image description on click -->
$("ul.thumbs li a").click(function () {
var tip = $(this).css("visibility:visible");
$(".one_sixth_column_copy .work_info").html("");
});

HTML//

<div class="work_two_third_column_copy">
<a href=""><img src="main_image1.gif"></a>
</div><!-- End .work_two_third_column_copy -->


<div class="one_third_column_right">

<div class="one_sixth_column">
<div class="one_sixth_column_copy">
<div class="work_info">&nbsp;</div><!-- End Image Information -->
</div><!-- End .one_sixth_column_copy -->
</div><!-- End .one_sixth_column -->

<div class="one_sixth_column_thumbs">
<ul class="thumbs">
<li><a href="main_image1.gif"><img src="1.gif"><span class="tip">number one desc</span></a></li>
<li><a href="main_image2.gif"><img src="2.gif"><span class="tip">number two desc</span></a></li>
<li><a href="main_image3.gif"><img src="4.gif"><span class="tip">number three desc</span></a></li>
<li><a href="main_image4.gif"><img src="5.gif"><span class="tip">number four desc</span></a></li>
</ul><!-- ul.thumbs -->
</div><!-- End .one_sixth_column_thumbs -->

</div><!--End .one_third_column_right -->

So far when I click the thumb the images show up fine and so I thought I could use the same sort of principles to get a similar effect. I have set the thumbs at a fixed width so the span does not show on the page but I still made the span visibility:hidden; just to be sure.

Any suggestions, it has been a while since I coded in jQuery so if it looks rough anywhere criticism is welcome.

Thanks, Chris

Answer 1

Solved it by going over a few methods and tweaking away. Here are the parts of my code which I changed.

jQuery//

<!-- Swap portfolio information on click -->
    $(function() {
      $("ul.thumbs li a").click(function() {
        $(".work_info p").text($(this).next().text());
        return false;
      });
    });

HTML//

<li><a href="main_image1.gif"><img src="1.gif"></a><p>number one text</p></li>
<li><a href="main_image2.gif"><img src="2.gif"></a><p>number two text</p></li>

This piece I found on a similar question on here but couldn't get it working right at first. So a special thanks to Adam and Nick Craver. You have de-fried my brain.

Answer 2

Use only one event handler and find the description inside the clicked link itself:

$("ul.thumbs li a").click(function() { 
    var mainImage = $(this).attr("href"); //Find Image Name

    //Set image:
    $(".work_two_third_column_copy img").attr({ src: mainImage });

    //Find description:
    var oDescSpan = $(this).find(".tip");
    if (oDescSpan.length == 1)
        $(".one_sixth_column_copy .work_info").html(oDescSpan.html());
    else
        $(".one_sixth_column_copy .work_info").html("");

    return false;  
});

Answer 3

Two things:

1. Calling click the second time removes the first click behavior.
2. You are putting empty HTML in .work_info

Below does what you want:

var clickerSetup = function() {
    $("ul.thumbs li a").click(function() {
        var mainImage = $(this).attr("href"); //Find Image Name
        $(".work_two_third_column_copy img").attr({ src: mainImage });
        var tip = $(this).css("visibility:visible");
        $(".one_sixth_column_copy .work_info").html($(this).text());

        return false
    }); 
};
$(document).ready(function() {
    clickerSetup();
});

Answer 4

Took on board user344215's point that the behavior would be canceled, so here is a more condensed version:

<!-- Swap portfolio image and desc on click -->
    $("ul.thumbs li a").click(function() {  
        var mainImage = $(this).attr("href"); //Find Image Name
        $(".work_two_third_column_copy img").attr({ src: mainImage });
        $(".work_info p").text($(this).next().text());
        return false;       
    });

It works great.