1

因此，总的来说，我对编程还很陌生，而且我一直在努力寻找解决我面临的许多问题的方法。总的来说，事情已经开始到位，但有时事情绝对让我难过。比如现在。我正在为我女朋友的艺术网站制作一个简单的灯箱。我已经想出了如何使用 php 获取列表中的图像。弄清楚如何使用 Jquery 将图像包装在锚点中，并弄清楚如何使覆盖显示在屏幕上。一切都很顺利，直到上面的图像显示为“未定义”，如http://www.mysite.com/JPG/undefined 我想我在某个地方弄乱了变量，但无论我怎么看，我似乎都看不到问题所在。你们中的任何一个好人都可以帮助一个菜鸟吗？这是不工作的jquery。如果您需要代码的其他部分，请询问。

$("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();
            });
});

                                });

所以雅有什么想法吗？

这是生成 html 的 php

<?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"/>'  ;
}
?>

否则，这是包含所有内容的 PHP 文件……抱歉，如果我没有提供所需的信息。正如我所说，我是新人。

<!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>
4

1 回答 1

1

src如果它是图像，你应该照顾它，而不是href。

试试这个：var image_href = $(this).attr("src");

您可以使用.prop代替.attr，您可以在此处阅读原因。

如果您正在寻找您可以使用href的parentof the ：img

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

检查此演示是否首先获得图像 src，然后获得 href。

于 2013-07-25T21:47:49.860 回答