0

我正在做画廊，我需要一些帮助。我已经通过网站将图像上传到数据库 - 它们存储在 MySQL（名称）和名为 images 的文件夹中。我想要的是在线显示（缩影）它们并单击放大它们。

我的代码所做的是显示缩影并将它们链接到任何内容：/ ...

这是我的代码：

<?php
$hostname_connect= "localhost";
$database_connect= "gallery";
$username_connect= "root";
$password_connect= "root";
$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
                                @mysql_select_db($database_connect) or die (mysql_error());

$query_image = "SELECT * FROM gallery_images";

$result = mysql_query($query_image);
if(mysql_num_rows($result) > 0)
{
while($row = mysql_fetch_array($result))
{
?>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
                                    }
while($row = mysql_fetch_array($result))
{
?>
<div id="light" class="white_content">
<?php
echo '<img alt="gallery" src="images/'.$row["image"].'" class="" alt=""></a>';
                                            ?>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<?php
}
}
else
{
echo 'File name not found in database';
}

?>
4

1 回答 1

1

您正在循环使用它：

<div id="light" class="white_content">

因此，您将拥有多个具有相同 ID 的元素，这是不允许的。

然后你尝试像这样访问它们：

document.getElementById('light')

这会给你它找到的第一个元素，而不是你想要放大的实际元素（除非它是第一个......）。

就我个人而言，我会使用标准的灯箱解决方案，将您的缩略图链接到您的大图像（而不是javascript:void(0)），并使用链接的href属性在单击缩略图时使用 javascript 设置大图像的来源。

编辑：让您入门的 html 示例：

<?php
while($row = mysql_fetch_array($result))
{
?>
  <a href="<?php echo 'images/'.$row["image"]; ?>" onclick="return showImage(this);">
<?php
  echo '<img alt="gallery" src="images/'.$row["image"].'" class="pic-resize" alt=""></a>';
}
?>
<div id="light"><img src='' alt=''></div>

现在你只需showImage()要用 javascript 编写函数来完成实际的工作：

  • 获取href点击链接的属性；
  • 将图像的来源设置#light为该值；
  • 显示#light元素。
于 2013-06-27T14:37:17.933 回答