Display title attribute of an image inside a DIV

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.

Answer 2

Change the following:

1.

#main_view{
    background: #FFFFFF;
    left: 45%;
    margin-top: 128px;
    padding: 0 0;
    position: absolute;
}

title{

background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;

}

Remove the inline style for the div with title as ID.

in the hover function of ($("ul.thumb li").hover) add the below line after - $(this).css({'z-index' : '10'});

var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);

Answer 3

The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.

$(document).ready(function(){
    //Larger thumbnail preview 
    var $title = $('#title');
    $("ul.thumb li, ul.thumb2 li").hover(
        function() {
            var $this = $(this);
            $this.css({'z-index' : '10'});
            $this.find('img').addClass("hover").stop()
                .animate({
                    marginTop: '-50px', 
                    marginLeft: '-50px', 
                    top: '50%', 
                    left: '50%', 
                    width: '100px', 
                    height: '100px',
                    padding: '0px' 
                }, 200);
            $title.stop().animate({opacity:0.4}, 200, function(){
                $title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
            });
        },
        function() {
            $this = $(this);
            $this.css({'z-index' : '0'});
            $this.find('img').removeClass("hover").stop()
                .animate({
                    marginTop: '0', 
                    marginLeft: '0',
                    top: '0', 
                    left: '0', 
                    width: '75px', 
                    height: '75px', 
                    padding: '0px'
                }, 400);
    });
    //Swap Image on Click
    $("ul.thumb li a, ul.thumb2 li a").click(function() {
        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;        
    });
});

http://jfcoder.com/test/hoverfade.html