jquery: grab div title attr, put it into the image src

I'm creating a lightbox for a website I'm creating, and no, I don't want to use one already made, I want to make my own.

When the user clicks on a <span> somewhere on the website, I have jquery grab that <span>'s title attribute, and stick it into an image src, and then inject that image tag into .overlay_content.

Everything works except it wont grab the title, the variable doesn't work and I don't know what I did wrong. It's inserting grabbed-img into the src for the image, not the title of the span.overlay_img

     $(document).ready(function() {
        $('.overlay_img').click(function (){
            var docHeight = $(document).height();
            var grabbed_img = $(this).attr('title'); 

            $(".overlay_bg").height(docHeight).fadeIn(300, function(){
                $(".overlay_content").html("<img src='grabbed_img'>").fadeIn(300开发者_JAVA技巧); 
                });
            });

        });

Are you sure it's not grabbing the title? Have you tried an alert to test it?

alert(grabbed_img)

Looks like it might be an issue with this line:

        $(".overlay_content").html("<img src='grabbed_img'>").fadeIn(300); 

Should be:

        $(".overlay_content").html("<img src='" + grabbed_img + "'>").fadeIn(300); 

Try the following on line 7 of your script:

(".overlay_content").html("<img src='" + grabbed_img + "'>").fadeIn(300);

There's no variable interpolation of the type you attempt in JavaScript. You need to build the string up using the concatenation operator.

its not grabbing the title because your not directing it to grab the image's title, your directing it to grab the div's title, and it has none.

    $('.overlay_img img')