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')