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

【问题标题】：Trying to show full size image from thumbnails retrieved using php and database尝试从使用 php 和数据库检索的缩略图中显示全尺寸图像
【发布时间】：2015-03-15 05:06:49
【问题描述】：

我正在尝试使用从数据库中检索到的缩略图。 PHP 工作正常并显示我的缩略图。我不知道如何将数据库中的 id 获取到 JavaScript 函数的 imageID 和 getElementById，以便在单击时显示为全尺寸。我可以在我的代码中直接使用 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>

【问题讨论】：

标签： javascript php html css

【解决方案1】：

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

否则，你只会做类似“ src="/blah" />

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

然后对于我的 onclick 功能，基本上做同样的事情。

【讨论】：

【解决方案2】：

我会做很多假设，但是就这样吧！

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

<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，该 URL 是从上一页（您的新目标列表）继承的，并且可以像您的其他链接一样回显，例如：

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

我希望这会有所帮助！ =D

【讨论】：

谢谢你们！在走这条路线之前，我想提供更多背景知识。我已经有一个带有单选按钮的目标页面，可以将我们带到这个纽约页面；还有 3 个其他 dest 页面。每个页面都将进入数据库并获取 6 个缩略图。从我读到的听起来缩略图页面必须生成它自己的新页面？我明白了吗？为了将数据库中的 ID 与 img 一起使用，我需要创建另一个页面吗？有没有办法可以将 ID 转换为 Javascript，以便在单击同一页面时使用它来呈现更大的图像？
我正在删除具有误导性的 javascript 函数以及硬编码的 img 标签。我真的需要使用数据库，而不是硬编码。
是的，你明白了！现在，一旦您更好地掌握了如何做到这一点，您将能够利用上面的代码，因为您似乎没有完全了解 PHP 的强大功能！这是一个非常好的入门资源，我知道这是一个视频，它是关于开店的，但它都是相关的，它让我开始使用 PHP！ youtube.com/watch?v=65gV8JOgWkQ 另外，为了在脚本中使用您的 ID，只需像往常一样回显 ID，但将其包装在它自己的 php 标签中 -另外，只注意PHP，因为他仍然使用mysql来查询数据库而不是mysqli！
谢谢喵喵！视频链接太棒了！尤其是数据库中的那些。所以，我去重做我的数据库以更加专注。数据库不再包含所有 HTML，因此我可以使用它。我授权我的 PHP 将 javascript 和 php 交织到其中。但你说得对，我才刚刚开始。你能帮我看看语法吗？
if ($result->num_rows >= 0) { echo ""; while($row = $result->fetch_assoc()) { echo '["ID"].'"src="'.$row-> ["THUMBNAIL"]. '"' onclick="showImage('imageID')" onclick="showCaption('captionID')">'; } 回声“
”；