jQuery slider to load content one at a time - php

Question

I have a slider that load all of my content at once. Into a div. Like so:
external page.php
$get_users = mysql_query("SELECT * FROM user WHERE id!='$user_id'");
while ($rows = mysql_fetch_assoc($get_users)) {
$id = $rows['id'];
$firstname = $rows['firstname'];
$display_info .= '
<div class="f_outer" id="' . $id . '">
<div class="f_name likeu">' . $firstname . '</div>
</div>';
}
echo $display_info;
I call this page from my find.php page using bxslider
Here is my find.php page below.
<script type="text/javascript">
$(function() {
var slider = $("#slider1").bxSlider();
$("#slider-like").live('click', function() {
slider.goToNextSlide();
return false;
});
});
</script>
<div id="slider-like>Yes</div>
<div id="slider1">
<?PHP
include ("external.php");
?>
</div>
So what I get is all of my .f_outer div on the find.php page. I have hundreds of user and they will all be loaded at once. I would like to only load one slide at a time. So when I click #slider-like it load one of my dive from my external page.

Answer 1

If you include external.php, it loads all of the data from user. If you want to dynamically load, you need to use ajax instead of including the file on the server. You can keep track of what user you are up to with JS or the php session. I think the former is easier:
var nextUser = 0;
$(document).on('click', '#slider-like', function (e) {
var slider = $("#slider1").bxSlider();
$("#slider1").load("getuser.php?num=" + nextUser, function () {
slider.goToNextSlide();
nextUser++;
});
e.preventDefault();
});
Then, on getuser.php, you would have:
$num = isset($_GET['num']) ? $_GET['num'] : exit;
$query = "SELECT * FROM user WHERE id != '$user_id' LIMIT $num,1";
This queries the $numth user and limits it to one result.
NOTE: You should use PDO or mysqli instead of mysql_*. Both $user_id and $num need to be escaped.