加载图像到div，PHP和jQuery invloved

这是我需要完成我的大学PHP课程的任务。我已经花了整整一天的时间，尝试不同的东西（例如ajax jquery加载）。我很确定我需要走上我目前的道路。在a href作品中，onclick我试着用脚本部分做出的警告。但是，我不明白如何将图像加载到div photoHolder。这位照片持有者应该包含我点击的缩略图。当然它应该是动态的。所以当我上传图片并且创建了一个自动缩略图时，当我点击缩略图时应该显示原始图片。我还需要添加评论和评分，但我们先来看看它。加载图像到div，PHP和jQuery invloved

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

的一块PHP的其在href的onclick：

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>`

这个位于我的jQuery的一部分的header.php包括

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

Ofcourse它现在是空的，因为我希望从一张干净的纸张开始。

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

Gist for you

编辑如果还不清楚我需要加载位于我上传文件夹中的较大图像。这是我怎么点击拇指时，在新标签加载一个例子链接：

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

来源

2013-10-22 PimWillems

好头号问题这里是你没有任何的jQuery。你需要为此包含jquery库。您可以通过$ global变量（如$（Do stuff）.likethis（{triggeringthisfunction}））来一目了然地告诉jquery。 - jQuery并不那么简单，所以我不确定他们为什么将它分配给PHP类的介绍。 – baordog

如何获取较大图片的网址？ –

@baordog为什么你会说jQuery没有被使用会是一个问题？ Javascript足以满足OP想要实现的功能。 jQuery只是一个功能将是一个矫枉过正。 –

使用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-22 20:19:02 Latheesan

好，但尽量避免内联JS。相反，使用事件处理程序，如'.on（'click'，function（）{}）;' – sdespont

解决问题的好方法！ +1 –

不知道为什么，由代码块从我的帖子中删除了＃。这是正确的行：'$（'＃photoHolder'）。html（...）' – Latheesan

加载图像到div，PHP和jQuery invloved

回答

相关问题