Question

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

        });

Answer 1

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