1

这是我在大学完成 PHP 课程所需完成的一项任务。我已经花了一整天的时间尝试不同的事情（例如ajax jquery加载）。我相当确定我需要沿着我目前的道路前进。在工作onclick中a href，我尝试了在脚本部分制作的警报。但是，我不知道如何将图像加载到 divphotoHolder中。这个照片夹应该包含我点击的缩略图。当然它应该是动态的。因此，当我上传图像并创建自动缩略图时，单击缩略图时应显示原始图片。我还需要添加评论和评级，但让我们先把它写下来。

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

onclick具有以下内容的PHP 部分href：

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
    }

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

如果难以阅读，这是我为您制作的 Gist（#photoHolder位于 view_album.php 的第 30 行）

为您提供要点

编辑 如果不清楚：我需要加载更大的图像，位于我的上传文件夹中。这是单击拇指时如何将其加载到新选项卡中的示例链接：

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

1 回答 1

3

使用 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" />');
    });
});
于 2013-10-22T20:19:02.340 回答