PHP, MySQL & JQuery Image display problem?

Question

My script is supposed to 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.

My Question: So my question is that my images won't display when the user clicks the link <a href="#">View All</a> and I was wondering how can I fix this problem so that all my users images are displayed when the user clicks the link?

PHP & MySQL code.

$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 code.

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

Here is the HTML code

<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

You will need some images in that #hidden div. You could simplify the code by using css to hide your #hidden div (#hidden { display: none; }

Use the following jQuery:

$(document).ready(function(){

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

});

Answer 2

Another try.

You 'hidden' div is outside of loop, so no image can be printed in it. It becomes clear if you use some indentations in the code:

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">';
}

update try moving if($row_count == 5) {...} right after $row_count++;. (I didn't run it, but looks like a right thing to do).

Answer 3

Pardon me if i missed something, but it doesn't seem like you put anything into the "hidden" div. That would make sense if you want to dynamically fetch the images from the server, which i recommend for faster load times. However, there is no jQuery code to do this. You could simply do this:

// 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>";
}

On the client, you would call this with something like:

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

All untested, of course, but it should work with minor modifications.

Oh, and the View all button in this case will only show ten more, which is more reasonable depending on the number of photos. However, it only shows 10 more the first time, fixing that is left as an exercise for the reader :).

EDIT: If you want, you don't have to dynamically fetch the images from the server (although i recommend it). For example, you could do something like the following:

// 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>";

Of course, that will only get the first 100, and might generate a bunch of empty lists, but if you have more than 100 images, or are worried about the extra lists, i would just fetch them dynamically :).