PHP，MySQL和JQuery图像显示问题？

Question

我的脚本应该显示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>    

Answer 1

您需要在#hidden DIV一些图像。您可以通过使用CSS来隐藏自己的#hidden DIV（#hidden简化代码{显示：无;}

使用下面的jQuery：

$（文件）。就绪（函数（）{

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

}); 

Answer 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++;之后。 （我没有运行它，但看起来像是正确的事情）。

Answer 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多个，这取决于照片的数量更合理。但是，它只是第一次显示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张图像，或担心关于额外的列表，我只会动态获取它们:)。