Animation jQuery sur page PHP

Fermé
Lic90 Messages postés 21 Date d'inscription mercredi 27 mai 2015 Statut Membre Dernière intervention 15 août 2015 - 15 août 2015 à 01:11
Lic90 Messages postés 21 Date d'inscription mercredi 27 mai 2015 Statut Membre Dernière intervention 15 août 2015 - 15 août 2015 à 15:42
Bonjour,

Je suis étudiante en web développement et je dois réaliser une galerie d'images en php avec un effet jquery de transition lorsqu'on clique sur les liens du menu. C'est la première fois qu'on intègre du jQuery dans une page php alors je me perds un peu.

Mon menu se compose de 4 liens: Toutes / Catégorie 1 / Catégorie 2 / Catégorie 3

Les tris se fonctionnent correctement, le problème c'est l'animation jQuery. Je ne sais vraiment pas comment m'y prendre. J'ai attribué des id à chaque rubrique du menu via le code ci-dessous. Voici ma page menu.php :
 <?php
require_once 'connexion.php';

// Le menu (on fait une requete multiple afin d'obtenir tous les enregistrements du champ nom de la table categories)

$sqlMenu = "SELECT id, nom "
. "FROM categories "
. "ORDER BY id ASC;";

$armoireMenu = $connexion->query($sqlMenu); //On exécute la requête sqlMenu et on recupère son résultat dans une "armoire" appelée $armoireMenu

$categories = $armoireMenu->fetchAll(PDO::FETCH_OBJ); //On ouvre tous les tiroirs de l'armoire avec fetchAll et on on met son contenu sous forme d'objet dans un array: $categories

$armoireMenu->closeCursor(); //On vire l'armoire
$armoireMenu = null;

?>

<!-- Début de région à répéter -->

<?php foreach($categories as $categorie) { ?>
<li>
<a href="index.php?catID=<?php echo $categorie->id; ?>" <?php if($categorie->id == $catID){echo 'class="active"';} ?> id='<?php echo $categorie->id;?>' >
<?php echo $categorie->nom; ?>
</a>
</li>
<?php } ?>
<!-- Fin de région à répéter -->

</ul>


Ensuite j'ai attribué des classe aux images de ma galerie:
     $sqlImages = "SELECT id, titre, description, photo,  categorieID "
. "FROM images "
. "WHERE categorieID = $catID;";

$armoireImages = $connexion->query($sqlImages);

$images = $armoireImages->fetchAll(PDO::FETCH_OBJ);

$armoireImages->closeCursor();
$armoireImages = null;


?>
<!-- Début de région à répéter -->

<?php foreach($images as $image) { ?>
<a class="large-4-12-colonnes" href="index.php?catID=<?php echo $catID; ?>&imageID=<?php echo $image->id; ?>">

<figure class='<?php echo $image->categorieID; ?>'> <!--id pour jQuery-->
<img src="<?php echo $image->photo; ?>" alt="<?php echo $image->titre; ?>">
<figcaption>
<h2><?php echo $image->titre; ?></h2>
<p><?php echo $image->description; ?></p>
</figcaption>
</figure>
</a>

<?php } ?>
<!-- Fin de région à répéter -->


Ces deux pages je les inclues dans mas page index.php. Cependant, lorsque j'essaye de faire une petite animation jQuery sur ma page index.php, ne serait-ce qu'un border par exemple, l'effet ne dure qu'une milliseconde, le temps de relâcher le clic de la souris. Par exemple :

$("#1").click(function(){ //Les catégories ayant l'id 1
$(".1").css("border","10px solid red"); //Les images ayant la class 1
});

Le border rouge apparait et disparait automatiquement. Cela n'arrive que lorsque je clique sur les liens de mon menu. Si je clique sur n'importe quel autre élément de la page, je n'ai pas ce problème.

Je pense que mon code n'est pas juste pour l'attribution des id dans la boucle foreach mais je ne sais pas comment procéder.

(Mon code est assez basique. Je précise qu'on n'a pas encore vu l'architecture MVC ni Synfony)

Je vous remercie d'avance de votre soutien et votre compréhension. Vous êtes mon dernier espoir.
A voir également:

1 réponse

Lic90 Messages postés 21 Date d'inscription mercredi 27 mai 2015 Statut Membre Dernière intervention 15 août 2015
15 août 2015 à 15:42
Personne pour m'aider ?
0