Question

这是我在大学完成PHP课程时需要完成的任务。我已经花了整整一天时间，尝试不同的东西（例如ajax jquery加载）。我很确定我需要走上我目前的道路。 onclick中的a href有效，我通过我在脚本部分发出的提醒尝试了它。但是，我无法弄清楚如何将图像加载到div photoHolder中。此photoholder应包含我单击的缩略图。当然它应该是动态的。因此，当我上传图像并创建自动缩略图时，单击缩略图时应显示原始图片。我还需要添加评论和评分，但让我们首先解决这个问题。

我当然希望，毕竟这是一个我学到很多东西的网站，有人可以帮助我。

在onclick中有href的PHP片段：

foreach ($images as $image) {
    echo '<a href="#" onclick="makeBigger();"><img src="uploads/thumbs/', $image['album'], '/', $image['id'], '.', $image['ext'], '" title="Uploaded ', date('D M Y / H:i', $image['timestamp']), '" /></a> 


            [<a href="delete_image.php?image_id=', $image['id'], '">x</a>]';
    }
}
?>

    <div id="photoHolder"></div>`

这是我所包含的header.php中的jQuery部分

    function makeBigger() {
           // This function needs to load the picture with a max width of
           // 300px into the "photoHolder" div located on view_album.php
    }

当然现在它已经空了，因为我想从一张干净的床单开始。

如果难以阅读，这是我为你做的一个要点（#photoHolder在view_album.php的第30行）

Gist for you

修改如果不清楚：我需要加载位于我的uploads文件夹中的较大图像。这是一个示例链接，说明如何在单击拇指时将其加载到新选项卡中：

<a href="uploads/', $image['album'], '/', $image['id'], '.', $image['ext'], '"></a>

Answer 1

使用jQuery（http://jquery.com/），您可以这样解决：

在<head></head>代码之间添加：

<script type="text/javascript" 
        src="http://code.jquery.com/jquery-1.10.2.js"></script>

替换这个：

onclick="makeBigger();"

用这个：

onclick="makeBigger(this);"

这里是javascript函数：

function makeBigger(imageLink)
{
    // get Image URL
    var imageUrl = $(imageLink).find('img').attr('src');

    // load big image
    $('photoHolder').html('<img src="'+imageUrl  +'" width="300" />');
}

编辑： 或者，您可以添加替换：

<a href="#" onclick="makeBigger();">

使用：

<a href="#" class="imageLink">

你的功能如下：

$(document).ready(function()
{
    $('.imageLink').click(function()
    {
        // get Image URL
        var imageUrl = $(this).find('img').attr('src');

        // load big image
        $('photoHolder').html('<img src="'+ imageUrl  +'" width="300" />');
    });
});

将图像加载到div，PHP和jQuery中

1 个答案: