如何使用 php/javascript/css 制作图片库？答案

【问题标题】：How can I make an image gallery using php/javascript/css?如何使用 php/javascript/css 制作图片库？
【发布时间】：2018-03-25 23:22:40
【问题描述】：

到目前为止我做了什么：

<div class="gallery">
<?php

$postimg[]= "";
$postimg = DB::query('SELECT * FROM posts where user_id=:userid ORDER BY 
posted_at desc ' ,array(':userid'=>$userid));

foreach($postimg as $img)
{
echo "<a href=".$img['postimg']."><img  src='".$img['postimg']."' 
height='300' width='300'></a>";

  echo "<div class='gallery'>
  <img class='image' src='".$img['postimg']."'>
  <div class='overlay'>hover test</div>";
}
?>

图片已显示，但我的 css 有问题，我似乎无法做很多事情。

更具体地说，我尝试在每张图片上添加悬停效果，但是当我将鼠标悬停在一张图片上时，所有图片的悬停都会出现在页面底部。此外，图像非常小。

这是我的css代码：

.gallery img {
    cursor: pointer;
    width: 25%;
    border-radius: 4px;
    transition: .3s;
    padding: 13px;
}


.gallery {
  position: relative;
  width: 100%;
  max-width: 300px;
}



.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.gallery:hover .overlay {
  opacity: 1;
}

所以我的问题来了：我的数据库问题不正确，所有悬停同时出现吗？这是一个完全的css错误吗？（我有 0 个 CSS 知识）

Here is a a photo of the problem.

【问题讨论】：

标签： php css image gallery

【解决方案1】：

您的悬停立即发生，因为您的 html 无效。你有一堆开放式<div> 标签：

<!-- START GALLERY -->
<div class="gallery">

<?php
$postimg[]= "";
$postimg = DB::query('SELECT * FROM posts where user_id=:userid ORDER BY 
posted_at desc ' ,array(':userid'=>$userid));

foreach($postimg as $img) {
    echo "<a href=".$img['postimg']."><img  src='".$img['postimg']."' 
height='300' width='300'></a>";
    # START GALLERY AGAIN
    echo "<div class='gallery'>
    <img class='image' src='".$img['postimg']."'>
    <div class='overlay'>hover test</div>";
    # NO GALLERY END!!
}
?>
<!-- NO GALLERY END!! -->

首先，我可能会在不同的页面上创建一个函数，并在页面加载时将其包含在页面顶部一次。这样您就可以清理视图并使其可重用（创建此函数更多的是建议而不是要求）。

/functions/getImagesById.php

<?php
function getImagesById($userid)
{
    $result = DB::query('SELECT * FROM posts where user_id=:userid ORDER BY 
posted_at desc ' ,array(':userid'=>$userid));
    return (!empty($result))? $result : [];
}

你的脚本应该更像：

<?php
# Include function
include_once("/functions/getImagesById.php");
# Loop through the returned array
foreach(getImagesById($userid) as $img): ?>

    <a href="<?php echo $img['postimg'] ?>"><img  src='<?php echo $img['postimg'] ?>' height='300' width='300' /></a>
    <!-- START THIS GALLERY -->
    <div class='gallery'>
        <img class='image' src='<?php echo $img['postimg'] ?>' />
        <div class='overlay'>hover test</div>";
    </div>
    <!-- END THIS GALLERY -->

<?php endforeach ?>

【讨论】：