Making Album-viewer Like Facebook

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

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

Solution 2:

If you are sorting your photos by date DESC and you got the current photos date do the following:

• To find the next photo: Order your photos by date DESC and select the first photo whos date is smaller than the date of the current photo. Fetch only the first one.
• To find the prev photo: Order your photos by date ASC and select the first photo whos date is greater than the date of the current photo. Fetch only the first one.

Construct the SQL-Statements for this by yourself.