Image SRC attribute "undefined"

Question

So I am fairly new to programming in general and I've been diligently finding solutions to the many problems that face me. Overall things are starting to fall in to place, but sometimes things just absolutely stump me. Like right now for instance. I am making a simple lightbox for my girlfriend's art website. I have figured out how to get the images in a list with php. Figured out how to wrap the images in anchors with Jquery and have figured out how to make an overlay appear that covers the screen. Everything was going so well, until The images in the over appeared as "undefined" as in http://www.mysite.com/JPG/undefined I figure I have messed up the variable somewhere, but no matter how hard I look at it I can't seem to see the problem. Can any of you fine people help a noob out? here is the jquery that's not working . if you need other parts of the code, just ask.

$("document").ready(function(){
$(".gallimg").wrap(function(i) {
    var num = i+ 1;

    return "<a href='includes/JPG/"+ num + ".jpg'>"+"</a>"; });

$('.gallimg').click(function(e){
                    //Prevent Default Action (follow link)
                    e.preventDefault();
                    //Get clicked link href
                    var image_href = $(this).attr("href");

                    if ($('#overlay').length > 0) { // #overlay exists
                    //insert img tag with clicked link's href as src value
                    $('#contentov').html('<img src="' + image_href + '" />');
                    //show overlay window 
                    $('#overlay').show();
                    } 
                    else{ //#overlay does not exist
                        //create HTML markup for overlay window
                        var overlay =
                            '<div id="overlay">' +
                            '<p>Click to close</p>' +
                            '<div id="contentov">' +
                            //insert clicked link's href into img src
                            '<img src="' + image_href +'" />' +
    '</div>' +
'</div>';
//insert overlay HTML into page
$('body').append(overlay);


}
$('#overlay').click(function() {
                $('#overlay').hide();
            });
});

                                });

So Ya any ideas?

This is the php that generates the html

<?php // Find all files in that folder

$files = glob('includes/JPGsm/*');

// Do a natural case insensitive sort, usually 1.jpg and 10.jpg would come next to each         other with a regular sort
natcasesort($files);

// Display images
foreach($files as $file) {
    echo '<img src="' . $file . '" class="gallimg"/>'  ;
}
?>

Otherwise this is the PHP file that contains it all.... Sorry if im not giving the info needed. As I said, I'm new.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>Heather Wyatt -- Inspiring | Creating | Discovering</title>

</head>

<body>

        <div id="wrapper">

                <?php include('includes/header.php'); ?>

                <?php include('includes/nav.php'); ?>

            <div id="gallery">

                <?php include('includes/gallery.php'); ?>

            </div> <!-- end #gallery -->
        </div> <!-- End #wrapper -->
    <?php include('includes/scripts.php'); ?>
    <script type="text/javascript" src="includes/gallery.js"></script>
</body>

</html>

Please post your html also so we can answer better. – Sergio Jul 25 '13 at 22:00 — Sergio, Jul 25 '13 at 22:00

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

You should look after src if its an image, not href.

Try this: var image_href = $(this).attr("src");

You can use .prop instead of .attr, you can read here why.

If you are looking for the href of the parent of the img you can use:

var image_href = $(event.target).parent().attr("href");

Check this demo were you get first the image src, and then the href.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 25 '13 at 21:47

Sergio

28,539
11
85
132

In current versions of jQuery, in this example, `.attr()` is correct. `.prop()` is for qualities that can be changed without altering the DOM, such as `checked`. – Blazemonger Jul 25 '13 at 21:52
This sorta works. It makes the thumbnail appear instead of the image that is being linked to though. I really appreciate the speedy replies btw . – Elmosslave Jul 25 '13 at 22:00
Worked brilliantly . Thank you so much – Elmosslave Jul 25 '13 at 22:32

Image SRC attribute "undefined"

1 Answers1