Lier une pagination à une liste d'images
Bonjour a tous.
J'ai une liste de li contenant des images qui sont générer en php.
J'ai créer une pagination javascript qui calcule le nombre de li et retourne des balises a.
Mon problème est que je suis bloqué je ne comprend pas comment définir des action sur mes li au clique sur ma pagination. (Genre je clique sur le lien 2 de ma pagination et cela fait apparaitre le deuxième li apparait et cache , idem si je clique sur 4 le quatrième li apparait et les autre disparaissent).
Voici mon code HTML concernant mes li
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="gallerie">
<ul>
<?php query_posts('category_name=galerie'); ?>
<?php $i = 1 ?>
<?php while (have_posts()) : the_post(); ?>
<li id="img-gal_<?php echo $i++ ?>">
<?php the_content(); ?>
</li>
<?php endwhile;?>
<?php wp_reset_query(); ?>
</ul>
</div> |
Comme vous pouvez le voir j'ai créer un id pour chaque li qui s’incrémente de 1 a chaque tour de boucle (img-gal_1, img-gal_2 etc).
Voici mon code js que je vais commenter directement afin de vous expliquer ma démarche.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
$(document).ready(function(){
//Je calcul le nombre de li
var galImgNb = $("#gallerie img").length;
/*je fait une boucle qui va créer une pagination sous forme de lien pour chaque li
*/
for(var i=1; i<=galImgNb; i++){
$('#gallerie').append('<a href="#" id="pag-gal_'+i+'" class="gal-pagination">'+i+'</a>');
}
/*ici j'ai fait une fonction qui me permet de récupérer le chiffre de l'id des li de la galerie */
$("#gallerie ul").children('li').each(function(){
currentimg = $(this).attr('id')
currentimg = currentimg.split('_');
currentimg = currentimg[1];
// l'alert m'affiche bien 1 puis 2 puis 3 puis 4
alert(currentimg)
});
/*Ici j'ai déclencher un événement click sur ma pagination
et je récupérer son numéro d'id egalement afin de pouvoir lier ma pagination a mes li*/
$('.gal-pagination').click(function(){
var currentLink = $(this).attr('id');
var currentLink = currentLink.split('_');
var currentLink = currentLink[1];
//me retourne le bon numéro de l'id de la pagination cliqué
alert(currentLink);
});
}); |
Voila mon code me permet de récupérer les valeur 1,2,3 etc pour mes li et les valeur 1,2,3 pour mes paginations.
J’aimerai pouvoir faire au clique sur mes lien de pagination un action sur l’élément associé.
J’espère que mon message serra assez clair.
je tiens a préciser que j'aimerai vraiment comprendre la démarche de la personne qui m'aidera.
Merci beaucoup par avance.
