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

Question

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

when the user clicks on a somewhere on the website, i have jquery grab that '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); 
                });
            });

        });

Answer 1

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.

Answer 2

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