PHP, MySQL & JQuery Question?

Question

I have this script that displays all the users images which i will display below.

Is there a way I can display the first 10 images in the MySQL database and have the script hide the rest of the users images until the user clicks the link <a href="#">View All</a> and have the rest of the images slide down when the user clicks the link? 有没有一种方法可以显示MySQL数据库中的前10个图像，并让脚本隐藏其余的用户图像，直到用户单击链接<a href="#">View All</a>并用户单击链接时，其余图像是否会向下滑动？

Here is my PHP & MySQL script?

$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 {
    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>";
}
}
echo '<a href="#">View All</a>';

Answer 1

Split the images into two parts. And set the second part to be hidden. Then add a click handler to slideDown. Here is the code:

UPDATE: it's not necessary to put the first 10 images into a div, but won't hurt either.

PHP

<?php

//echo  '<div id="images">';  // visible images

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

  // other stuff
  // ...

  // after the 10th image (0-9)
  // open the hidden div
  if ($i == 9) {
    //echo  '</div>';          // end of visible images
    echo  '<div id="hidden">'; // hidden images
  }
}

echo '</div>'; // end of hidden
echo '<a href="#" id="view_all">view all</a>'; // view all

?>

jQuery

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

See it in action

Note: be sure not to hide the div with CSS. You do it in jQuery, and by this you allow users with JS disabled to get the content.

Answer 2

Yes, in your loop echoing out the list items, add the style="display:hidden" class="hidden" attribute when the count is > 10. Then use the window's scroll event to detect when the browser is scrolled near to the bottom of the window and then use jQuery to show the first hidden list item.

EDIT: This actually will show the items as the user scrolls down and does not need a "Show all button".

JQuery:

$(".hidden").hide();

$(window).scroll(function(){
    if ($(window).scrollTop()+$(window).height > $("li:hidden:first").offset().top - SOMEPADDING )) {
        $("li:hidden:first").fadeIn(200);
    }
}

Answer 3

我不确定这些图像的数量或大小，但是如果您想使其具有可伸缩性，我建议您进行ajax回调，以在用户请求时检索并填充“隐藏”图像。