尝试显示使用 php 和数据库检索的缩略图中的全尺寸图像

Trying to show full size image from thumbnails retrieved using php and database

本文关键字：略图 图像 全尺寸 检索 数据库 显示 php      更新时间：2023-09-26

我正在尝试使用从数据库中检索到的缩略图。PHP 工作正常并显示我的缩略图。我不知道如何将数据库中的id获取到JavaScript函数和getElementById的imageID中，以便在单击时显示为完整大小。 我可以在我的代码中做直接的JavaScript内联onsubmit。 内联 JavaScript 正在工作;正在显示缩略图，单击时显示全尺寸，但我想使用我的数据库检索到的图像在单击时显示全尺寸图像。 你认为你能帮我写代码吗？

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
    //function that shows full sized image of the thumbnail 
        function showImage(imageID) {
        //first hide all images
   document.getElementById('image1').style.display = 'none';
   //then display the one that had its thumbnail clicked.
        document.getElementById(imageID).style.display = '';
    }
</script>
</head>
<body>
<h1></h1>

<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "travel1";
$conn = new mysqli($host, $user, $pass, $database);
if ($conn->connect_error) 
    die ("Unable to connect to database: " . $conn->connect_error );
$sql = "select * from what_to_do
    where DESTINATION='NEW YORK CITY'";
$result = $conn->query($sql);
if ($result->num_rows >= 0) {
    echo "<table>";
        while($row = $result->fetch_assoc()) {
            echo "<td>".$row["THUMBNAIL"]."</td>";
        }
        echo "</table>";
}   
else {
        echo "You have no destinations";
}
$conn->close(); 
?>
<p>
<img id="image1" alt="" src="images/NewYork/Pick7/9-11show.jpg"
    style="display: none" />
</p>
<p>
<img alt="" src="="images/NewYork/Pick7/9-11thumb.JPG"style="width:100px;
 height:100px" onclick="showImage('image1')" />       
</p>

在此代码中，第二个 img 标签过早关闭，如 src="something" 等。如果该标签正确形成，我认为这应该有效吗？

否则，您只需执行类似" src="/blah"/>

希望这能回答你的问题吗？

然后对于I onclick功能，只需执行基本相同的操作即可。

我会

假设很多，但在这里！

上面的答案是正确的，你过早地关闭了代码底部的图像标签，它应该是这样的：

<img alt="" src="images/NewYork/Pick7/9-11thumb.JPG" style="width:100px;
 height:100px;" onclick="showImage('image1')" />

但除此之外，还有其他一些问题需要解决......

首先，通过在每个页面上为每个查询输入目标的特定名称，您将破坏使用数据库的目的！就像你提到的，你需要使用ID并相应地拉入数据。

为此，您需要通过让用户在上一页/部分选择目的地来定义 ID 是什么（在您的示例中，目的地列表可能适合按某种顺序排列的所有目的地，无论是升序还是降序等...PHP 有几种不同的方法。

因此，首先，按 ID 排序的查询是：

SELECT * FROM travel1 order by id desc

然后，要在单击目标链接时在URL中设置ID，下面是一个使用php将ID带到下一页的示例链接：

<a href="/destination-info.php?id=<?php echo $rows['id']; ?>">more info</a>

到达目标信息页面（这就是我所说的上述代码）后，过滤您的数据，以便您可以通过首先将其添加到页面（连接到数据库后）按 ID 访问特定目标：

<?php
if(isset($_GET['id'])){
        $id = preg_replace('#[^0-9]#i', '',$_GET['id']);
        $result = $con->query("SELECT * FROM travel1 WHERE id='$id' ");
        while($rows = $result->fetch_assoc()) {
        echo "<td>".$row["THUMBNAIL"]."</td>"; 
         }
         } else { 
 echo "We're having some issues..."; 
}
?>

上面的代码将从您的URL中获取数据库ID，该ID是从上一页（您的新目标列表）继承的，并且可以像其他链接一样回显出来，例如：

'echo "<td>".$row["THUMBNAIL"]."</td>";'

我希望这有所帮助！ =D

相关文章：