我正在做画廊,我需要一些帮助。我已通过网站将图像上传到数据库 - 它们存储在 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';
}
?>
最佳答案
您正在循环中使用它:
<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>
现在您只需在 javascript 中编写 showImage()
函数即可完成实际工作:
- 获取被点击链接的
href
属性; - 将
#light
中图像的来源设置为该值; - 显示
#light
元素。
关于php - 显示数据库中存储的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17345803/