php - Making album-viewer like facebook

Question

I am working on making a album-viewer like facebook.

I have made the "setup", you can see the photo, what album its in and so, now I would like to make the "next" "previous" buttons work.

I have seen them using preloading while viewing a current, and i wish to accomplish something like that.

But first of all, how can I make the "next"? What are the procedure to make the "next" work.

With this I mean how should I code it, so it knows which picture is next? I would like to sort it from the date(order by date), so the next should be newer than the current date, and previous older than the current date.

My database looks like this:

album
id uID title

album_photos
id aID uID photo date

aID holds the id of the album(album ID), uID holds the id of the user(userID).

I also want to make use of javascript too. Make an ajax request, instead of refreshing whole page.

So my question is:

What is the procedure of making next/prev button, if I would like to make it work after date DESC, how does the javascript look like? An ajax request to file.php, that are grabbing the latest image from the database and then on success it replace the current photo and show it? What about the adressbar, in facebook the adressbar changes align with loading new photo.

Any well explained answer for procedure of making this, will accept the answer

Answer 1

This here will load images from the database using ajax (next/previous). Also includes guides and a preloader (hosted here http://www.preloaders.net/). Let me know if you have any questions.

Here you go. these are 3 files

1. index.php ...display page
2. ajax.php ...read database for images
3. show.php ...loads images

just remember to set host, user, password & databasename in ajax.php

copy & paste these:
1. index.php

<?php
include("ajax.php");
?>



<script type="text/javascript" src="JQUERY/jquery.js"></script>
<script>
var ID = "<?php echo $id; ?>";
var inc = ID + 1;
var dec = ID;
var totalpages = "<?php echo $totalpages + 1; ?>";

$(function(){   
    $('.loader').hide();

    <!-- np = next & prev button functions -->
    $('.np').click(function() {

        if($(this).attr('id') == "next") {

            $(this).attr('push', inc++);
            if($(this).attr('push')<totalpages) {               
                $.ajax({url:"show.php", data:"id=" + $(this).attr('push'), success: AjaxFunc, cache:false });   
                $('.loader').show();            
                dec = inc - 2;
                $('#images').hide();
            }
        }


        else if($(this).attr('id') == "prev") {

            $(this).attr('push', dec--);        
            if($(this).attr('push')>-1) {

                $.ajax({url:"show.php", data:"id=" + $(this).attr('push'), success: AjaxFunc, cache:false });   
                $('.loader').show();
                inc = dec + 2;
                $('#images').hide();
            }
        }



    });
});

<!-- this function is called after ajax send its request -->
function AjaxFunc(return_value) {
    $('#images').html(return_value);
    $('.loader').hide();
    $('#images').show();
}

</script>

<div id="images">

    <!-- loads default numbers of images. whats inside here will change once you click next or prev -->
    <?php
        for($i=$id * $limit; $i<$limit + $id * $limit; $i++) {
            echo $imagearray[$i]."<br/>";
        }
    ?>
</div>


<!-- next & previous buttons -->
<a class="np" id="prev" push="<?php echo $id; ?>" href="#">Prev</a>
<a class="np" id="next" push="<?php echo $id + 1; ?>" href="#">Next</a>


<!-- preloader. hidden on start. will show while images load -->
<img class="loader" src="http://www.preloaders.net/generator.php?image=75&speed=5&fore_color=000000&back_color=FFFFFF&size=64x64&transparency=0&reverse=0&orig_colors=0&uncacher=26.066433149389923"/>

2. ajax.php

<?php

//id is tjhe page number. it is 0 by default. while clicking next/prev, this will not change. set it like this: file?id=0
$id = $_GET['id'];

//connect to the databsae
$host="localhost";
$user = "username";
$password = "";
$database = "database_name";
$connect = mysql_connect($host, $user, $password) or die("MySQL Connection Failed");
mysql_select_db($database) or die ("Database Connection Fail");

//set your the limit of images to be displayed
$limit = 5;

//push images into array
$q = mysql_query("SELECT * FROM image_table");
$num = mysql_num_rows($q);
while($r = mysql_fetch_array($q)) {
    $imagearray[] = "<img src='"
                    .$r['IMAGE_URL']
                    ."'/>";
}

//will determine total number of pages based on the limit you set
$totalpages = ceil($num/$limit) - 1;
?>

3. show.php

<?php
include("ajax.php");
for($i=$id * $limit; $i<$limit + $id * $limit; $i++) {
    echo $imagearray[$i]."<br/>";
}
?>