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

标签 javascript php html css

我正在尝试使用从数据库中检索到的缩略图。 PHP 工作正常并显示我的缩略图。我不知道如何将 id 从数据库获取到 JavaScript 函数的 imageIDgetElementById,以便在单击时显示为全尺寸。我可以在我的代码中直接执行 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 函数,基本上做同样的事情。

关于javascript - 尝试显示使用 php 和数据库检索的缩略图的全尺寸图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29057429/

相关文章:

Javascript提交仅影响while循环php中的第一个div

javascript - 如何向 rel ="value"添加多个标签/字符串

html - Meta Refresh 在页面加载期间工作吗?

相当于 php 的 urldecode() 的 Javascript

php - 在离线 TideSDK webapp 中将 SVG 导出为 PDF

php - 为什么要在 PHP 中合并 $_GET 和 $_POST?

java - 字符串编码不输出所有字符

javascript - 使用 Express.js 和 Kue.js 集群

javascript - JS/JQuery keyup 和 keydown Android 设备上不可预测的行为

php - 处理二维码生成器服务器端并存储在数据库中的库?