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

gblazex · Accepted Answer · 2010-07-01 21:53:41Z

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.

edited Jul 1, 2010 at 21:53

answered Jul 1, 2010 at 21:37

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

favor Over a year ago

How would i split the images into two parts?

favor Over a year ago

How would I go about coding the PHP so that it hides the second part of the images?

gblazex Over a year ago

just place the jQuery code into a <script> tag, and it will hide it for you.

favor Over a year ago

So would I have to run a second query to call the rest of the images?

gblazex Over a year ago

nope. just be sure that the one query selects all the images. It will hide it after the 10th index. See the code that i posted.

MarkD · Accepted Answer · 2010-07-01 21:41:31Z

0

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.

answered Jul 1, 2010 at 21:41

MarkD

4,9825 gold badges41 silver badges69 bronze badges

Comments

Tim Santeford · Accepted Answer · 2010-07-01 21:57:31Z

0

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);
    }
}

edited Jul 1, 2010 at 21:57

answered Jul 1, 2010 at 21:30

Tim Santeford

28.3k17 gold badges77 silver badges101 bronze badges

2 Comments

favor Over a year ago

You lost me I'm kind of new to JQuery so how would my code actually look? And what is the window's scroll event? Sorry for my ignorance.

favor Over a year ago

@jordanstephens I know the user meant hidden

Collectives™ on Stack Overflow

PHP, MySQL & JQuery Question?

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related