Bonjour,

j'ai une galerie avec une pagination, pour visualiser voici le site en question : http://mypapertoy.fr/
J'aimerai ajouter une fonction qui aurai un effet slide lors du changement de page, j'imagine que cela se fait en javascript mais je n'ai aucune idée de comment faire, sachant que je ne suis pas très avancé en javascript..

voici mon code actuel :

<!-- PAGINATION ----------------------------------------------------------------------->
 <?php

// Numero de page (1 par défaut)
if( isset($_GET['page']) && is_numeric($_GET['page']) )
	$page = $_GET['page'];
else
	$page = 1;

// Nombre d'info par page
$pagination = 12;

// Numéro du 1er enregistrement à lire
$limit_start = ($page - 1) * $pagination;

// Préparation de la requête
$sql = "SELECT * FROM mypapertoy ORDER BY id DESC LIMIT $limit_start, $pagination";

// Requête SQL
$resultat = mysql_query($sql);


// Nb d'enregistrement total
$nb_total = mysql_query('SELECT COUNT(*) AS nb_total FROM mypapertoy');
$nb_total = mysql_fetch_array($nb_total);
$nb_total = $nb_total['nb_total'];

// Pagination
$nb_pages = ceil($nb_total / $pagination);

// Affichage
echo '<div id="pagination"><p class="pagination">' . pagination($page, $nb_pages) . '</p></div>';

?>
<!-- PAGINATION ----------------------------------------------------------------------->

            <?php
            
            $req = mysql_query($sql) or die( mysql_error());
            while($article = mysql_fetch_assoc($req)){
				
            	echo '<div id="blocToy">';
                echo '<div id="titre"><span class="titre">'.$article['titreToy'].'</span><span class="artiste">'.$article['artisteToy'].'</span></div>';
                	echo '<div id="photo"><img src="toys/mini/'.$article['imageToy'].'" alt="SOON"/></div>';
                	echo '<div id="jaime">
						  <form action="vote.php" method="post">
						  <input type="hidden" value="'.$article['id'].'" name="id_article"/> 
						  <input id="jaime" type="submit" value="" name="love"/>
						  </form>
						  </div>';
						  echo '<a href="'.$article['linkToy'].'" target="_blank" border="0"><div id="download"></div></a>';
						  echo '<div id="vote">'.$article['voteToy'].'</div>';
						  
						  if(isset($_GET['ok']) && !empty($_GET['ok']) && isset($_GET['id']) && !empty($_GET['id'])){
				 	 if($_GET['ok'] == 1 && $_GET['id'] == $article['id']){
					echo '<div class="retour"></div><div style="width:143px; margin-top:3px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; height:auto; text-align:center; font-size:10px; background-color:#f48d8d;">Vous avez déjà voté pour ce toy !</div>';
				  	}else if($_GET['ok'] == 2 && $_GET['id'] == $article['id']){
					echo '<div class="retour"></div><div style="width:143px; margin-top:3px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; height:auto; text-align:center; font-size:10px; background-color:#88ec91;">Votre vote a bien ete pris en compte !</div>';
					}
				  }
						  
						  
                echo '</div>';
			
			}
			?>
            </div>
			<!-- BLOC TOY ////////////////////////////////////////////////////////////////////////////////////// -->

Bonjour,

Je pense que tu as au moins 2 façons de faire :

• La première est de charger l'intégralité de ta partie paginé puis d'effectuer un effet de "glissage"
• La seconde est de charger le contenu de la partie paginé de la deuxième page en Ajax puis d'effectuer un effet de "glissage"

Il y a beaucoup de façon de faire différente et ça dépend de l'effet attendu au final.

Ceci demande un peu de CSS et de javascript.

Les deux façon de faire ne sont pas exclusive, tu peux très bien commencé par la première puis basculer sur la seconde si tu commence à avoir beaucoup de page.

Par contre, pour que le javascript fonctionne correctement, il va falloir que tu revois un petit peu ton html. En faite, un "id" doit être unique dans ta page, or ici, tu crées des "id" dans une boucle .

Si tu début en javascript, je te suggère d'utiliser un framework tel que jQuery (ce sera d'autant plus simple).


Kymry