Question

This is the page I’m trying to do: Gallery

And what I’m trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.

I tried following the instructions here but for the second image the title didn’t swap and it only showed the first one.

Also I’m a little bit confused where to add the fadein fadeout for the div…

Sorry for the noobish question, I’m still learning this.

Thank you.

Answer 1

I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.

The problem is here:

var titleString = $("#thumb").attr("title");
$("#title").html(titleString);

When you’re telling it to switch the text, you’re always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:

var titleString = $(this).find('a').attr("title");

This assumes that you’ll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you’ll have to go through and add them if this is the way you decide to go.