PHP, MySQL & JQuery 图片显示问题？答案

【问题标题】：PHP, MySQL & JQuery Image display problem?PHP, MySQL & JQuery 图片显示问题？
【发布时间】：2011-03-10 21:44:24
【问题描述】：

我的脚本应该显示 MySQL 数据库中的前 10 张图像，并让脚本隐藏其余用户图像，直到用户单击链接 <a href="#">View All</a>，并在用户单击时让其余图像向下滑动链接。

我的问题：所以我的问题是当用户单击链接 <a href="#">View All</a> 时我的图像不会显示，我想知道如何解决这个问题，以便我的所有用户图像当用户点击链接时显示？

PHP 和 MySQL 代码.

$multiple = FALSE;
$row_count = 0;

$dbc = mysqli_query($mysqli, "SELECT * FROM images WHERE images.user_id = '$user_id'");
if (!$dbc) {
    print mysqli_error($mysqli);
} else {
    echo '<div id="images">';
    while ($row = mysqli_fetch_array($dbc)) { 
        if (($row_count % 5) == 0) {
            echo '<ul>';
        }
        echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

        if (($row_count % 5) == 4) {
            $multiple = TRUE;
            echo '</ul>';
        } else {
            $multiple = FALSE;
        }
        $row_count++;
    }
    if ($multiple == FALSE) {
        echo '</ul>';
    }
    if ($row_count == 5) {
        echo '</div>'; 
        echo '<div id="hidden">';
    }
}
echo '</div>';
echo '<a href="#" id="view_all">View All</a>';

JQuery 代码。

$(document).ready(function(){
    $("#hidden").hide();
    $("#view_all").click(function(){
      $("#hidden").slideDown();
    });
});

这是 HTML 代码

<div id="images">
    <ul>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
    </ul>
    <ul>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
        <li><img src="../images/image.png" /></li>
    </ul>

    </div><div id="hidden"></div>
    <a href="#" id="view_all">View All</a>

【问题讨论】：

你能发布从你的 PHP 创建的实际 HTML 代码吗？

标签： php jquery mysql

【解决方案1】：

您将需要该#hidden div 中的一些图像。您可以通过使用 css 隐藏您的 #hidden div (#hidden { display: none; }

使用下面的 jQuery：

$(document).ready(function(){

    $("#view_all").click(function(){
      $("#hidden").slideToggle("slow");
      return false;
    });

});

【讨论】：

【解决方案2】：

再试一次。

您“隐藏”的 div 在循环之外，因此无法在其中打印任何图像。如果你在代码中使用一些缩进就很清楚了：

while($row = mysqli_fetch_array($dbc)){ 

    if(($row_count % 5) == 0){
        echo '<ul>';
    }
    echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

    if(($row_count % 5) == 4) {
        $multiple = TRUE;
        echo "</ul>";
    } else {
        $multiple = FALSE;
    }
    $row_count++;
}
if($multiple == FALSE) {
    echo "</ul>";
}
if($row_count == 5) {
    echo  '</div>'; 
    echo  '<div id="hidden">';
}

更新尝试将if($row_count == 5) {...} 移动到$row_count++; 之后。（我没有运行它，但看起来是正确的做法）。

【讨论】：

但它现在是否在隐藏的 div 中打印了任何内容？在隐藏的 div 为空之前它不会起作用。
你确定你在循环的右括号之前移动了它吗？ :)

【解决方案3】：

如果我遗漏了什么，请原谅我，但您似乎没有将任何内容放入“隐藏”的 div 中。如果您想从服务器动态获取图像，那将是有意义的，我建议您加快加载时间。但是，没有 jQuery 代码可以做到这一点。你可以这样做：

// get-more-photos.php or something
$multiple = FALSE;
$row_count = 0;

$dbc = mysqli_query($mysqli,"SELECT *
                             FROM images
                             WHERE images.user_id = '$user_id'
                             LIMIT ".mysql_real_escape_string($GET['offset']).",".mysql_real_escape_string($GET['offset'])+10."");
if (!$dbc) {
    print mysqli_error($mysqli);
} else {
    while($row = mysqli_fetch_array($dbc)){ 

    if(($row_count % 5) == 0){
        echo '<ul>';
    }
        echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

if(($row_count % 5) == 4) {
    $multiple = TRUE;
    echo "</ul>";
} else {
    $multiple = FALSE;
}
$row_count++;
}
if($multiple == FALSE) {
    echo "</ul>";
}

在客户端，你可以这样称呼它：

$("#view_all").click(function(){
  $("#hidden").html("Loading...").slideDown();
  $.get('get-more-photos.php?offset=10', '', function(data) {
    $("#hidden").html(data).slideDown();
  });
});

当然，所有内容都未经测试，但只需稍作修改即可使用。

哦，在这种情况下，查看全部按钮只会再显示十个，这取决于照片的数量，这更合理。然而，它第一次只显示了 10 个以上，修复这个问题留给读者练习:)。

编辑：如果您愿意，您不必从服务器动态获取图像（尽管我推荐它）。例如，您可以执行以下操作：

// display-images.php
echo "<div>";
include "get-more-photos.php?offset=0";
echo "</div>";
echo '<div id="hidden">';
include "get-more-photos.php?offset=10";
include "get-more-photos.php?offset=20";
include "get-more-photos.php?offset=30";
include "get-more-photos.php?offset=40";
include "get-more-photos.php?offset=50";
include "get-more-photos.php?offset=60";
include "get-more-photos.php?offset=70";
include "get-more-photos.php?offset=80";
include "get-more-photos.php?offset=90";
echo "</div>";

当然，这只会得到前 100 个，并且可能会生成一堆空列表，但如果您有超过 100 个图像，或者担心额外的列表，我会动态获取它们 :)。

【讨论】：