制作像facebook这样的专辑查看器

Question

我正在制作像facebook这样的专辑查看器。

我已经进行了“设置”，你可以看到照片，它在哪张专辑中，现在我想让“下一个”“前一个”按钮工作。

我看到他们在观看电流时使用预加载，我希望完成类似的事情。

但首先，我如何制作“下一个”？使“下一步”工作的程序是什么。

有了这个我的意思是我应该如何编码它，所以它知道下一张图片是什么？我想从日期（按日期排序）对其进行排序，因此下一个应该比当前日期更新，并且之前的日期早于当前日期。

我的数据库如下所示：

album
id uID title

album_photos
id aID uID photo date

aID保存相册的ID（相册ID），uID保存用户的ID（userID）。

我也想利用javascript。发表一个ajax请求，而不是刷新整个页面。

所以我的问题是：

制作next / prev按钮的步骤是什么，如果我想在日期DESC之后使其工作，javascript是如何形成的？对file.php的ajax请求，它从数据库中获取最新的图像，然后在成功时替换当前的照片并显示它？怎么样的地址栏，在facebook中，地址栏更改与加载新照片一致。

对于制作此程序的任何一个很好解释的答案，都会接受答案

Answer 1

这里将使用ajax（next / previous）从数据库加载图像。还包括指南和预加载器（在此处托管http://www.preloaders.net/）。如果您有任何问题，请告诉我。

你走了。这些是3个文件

1. index.php ...显示页面
2. ajax.php ...读取图像数据库
3. show.php ...加载图片

只需记住设置主机，用户，密码和＆amp; ajax.php中的databasename


副本＆amp;粘贴这些：
的 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/>";
}
?>

Answer 2

如果您按照日期DESC对照片进行排序，并且您获得了当前的照片日期，请执行以下操作：

• 要查找下一张照片：按日期DESC订购照片，然后选择日期小于当前照片日期的第一张照片。只获取第一个。
• 查找上一张照片：按照日期ASC订购照片，然后选择日期大于当前照片日期的第一张照片。只获取第一个。

自己构建SQL语句。