PHP, MySQL & JQuery Question?

Question

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

My question: 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?

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

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 2

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 3

I'm not sure how many, or how large these images are, but if you want to make this scalable, I'd suggest doing an ajax callback that retrieves and fills in the "hidden" images, if the user requests them.