Faire un album-viewer comme facebook

Question

Je travaille à faire un album-visionneuse comme facebook.

J'ai fait la "configuration", vous pouvez voir la photo, quel album il est et maintenant, maintenant je voudrais faire fonctionner les "prochains" boutons "précédents". Je les ai vus en utilisant le préchargement tout en regardant un courant, et je souhaite accomplir quelque chose comme ça.

Mais d'abord, comment puis-je faire le "suivant"? Quelle est la procédure pour faire le "prochain" travail. Avec cela, je veux dire comment dois-je le coder, afin qu'il sache quelle image est la prochaine? Je voudrais trier à partir de la date (ordre par date), de sorte que le prochain devrait être plus récent que la date actuelle, et plus ancien que la date actuelle.

Ma base de données ressemble à ceci:

album 
id uID title 

album_photos 
id aID uID photo date 

aIdE contient l'id de l'album (album ID), uid contient l'identifiant de l'utilisateur (ID utilisateur). Je veux aussi utiliser Javascript. Faites une requête ajax, au lieu de rafraîchir la page entière.

Ma question est la suivante:

Quelle est la procédure de faire le bouton suivant/prev, si je voudrais le faire fonctionner après la date DESC, comment le javascript ressemble? Une requête ajax à file.php, qui saisit la dernière image de la base de données, puis en cas de succès, remplace la photo actuelle et la montre? Qu'en est-il de la barre d'adresse, dans Facebook les changements de barre d'adresse s'alignent avec le chargement de la nouvelle photo.

réponse Tout bien expliqué la procédure de faire cela, acceptera la réponse

Answer 1

Si vous triez vos photos par date DESC et vous avez la date de photos actuelles, procédez comme suit:

• Pour trouver la photo suivante: Commandez vos photos par date DESC et sélectionnez la première photo dont la date est inférieure à la date de la photo en cours. Récupère seulement le premier.
• Pour trouver la photo précédente: Commandez vos photos par date ASC et sélectionnez la première photo dont la date est supérieure à la date de la photo en cours. Récupère seulement le premier.

Construisez les instructions SQL pour cela par vous-même.

Answer 2

Ceci chargera les images de la base de données en utilisant ajax (suivant/précédent). Comprend également des guides et un préchargeur (hébergé ici http://www.preloaders.net/). Faites moi savoir si vous avez des questions.

C'est parti. ce sont 3 fichiers

1. index.php ... affiche une page
2. ajax.php ... base de données pour lire les images
3. show.php ... images charges

juste rappelez-vous de définir l'hôte, l'utilisateur, le mot de passe & nombase de données dans ajax.php

copie & coller ces:
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/>"; 
} 
?>