11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery : une utilisation par groupe de "rel" généré

Bonjour,

Comme je suis nouveau ici, je tiens déjà à remercier Alsacréations pour tout, je suis un assidu de votre site.

Pour commencer, j'apprend JQuery, j'en suis aux bases... Mais j'ai un truc compliqué à faire, alors, peut-être m'aiderez-vous à réfléchir (à formuler ce que je dois faire en programmation).

Voilà, j'ai pas mal d'images dont le rel est généré dynamiquement (avec l'ID_ARTICLE de SPIP). Donc j'ai des groupes de même rel, avec des identifiants aléatoires, que je ne connais pas. Cela donne, pour faire simple:


<a  href="truc.jpg" rel="45" >Voir les photos</a>
<a  href="truc.jpg" rel="45" >Voir les photos</a>
<a  href="truc.jpg" rel="30" >Voir les photos</a>
<a  href="truc.jpg" rel="30" >Voir les photos</a>


Chacun de ces groupes doit avoir une fonction particulière (pour les curieux, créer des galeries d'images avec colorbox - mediabox pour spip).

Comment je dois faire avec Jquery pour créer des fonctions pour chacun de ces groupes ?
Par exemple, j'ai ce code en Query, mais dont le "rel" est généré "manuellement" :

$("a[rel=45]:gt(0)").hide();


Comment faire pour que chaque groupe de "rel" puissent être interprétés par ce code ?

Je vous remercie ! Smiley smile
Attention l'attribut rel est standardisé, perso j'utiliserais plutôt des class ou une référence à un conteneur global (sur mon site c'est "article.post", le contenu du billet). Regarde le code source d'un billet de mon site. Smiley cligne
OK, j'ai remplacé le rel par un ID...
J'ai lu aujourd'hui les bases de JQuery... Bon, il y a du boulot encore !

J'ai fait ce tout petit bout de code (c'est déjà ça !) :

$('a.article_image').each(function(){
  var id = $(this).attr('id');
  var ensemble = '#' + id;
  $("ensemble:gt(0)").hide(); 
})

Mais ça ne fonctionne pas ! Smiley decu
L'idée est de regrouper les mêmes ID et afficher que le premier lien pour chaque groupe.

au lieu de ça :
<a  href="truc.jpg" id="45" >Voir les photos</a>
<a  href="truc.jpg" id="45" >Voir les photos</a>
<a  href="truc.jpg" id="30" >Voir les photos</a>
<a  href="truc.jpg" id="30" >Voir les photos</a>

je veux obtenir ça :
<a  href="truc.jpg" id="45" >Voir les photos</a>
<a  href="truc.jpg" id="30" >Voir les photos</a>

Voilà, si il y a des doués de Jquery qui peuvent me montrer et m'expliquer, merci.
Hello, en passant par un data-attribute pour séparer tes groupes, ainsi que par une classe permettant la fermeture de tous hormis le 1er, ça devrait passer.

$('a.article_image').each(function(){
  var group_id = $(this).data('group-id');
  var group_class = '.group' + group_id;
  $(group_class + ":gt(0)").hide(); 
});


Et le html :


<a  href="truc.jpg" data-group-id="45" class="group45">Voir les photos</a>
<a  href="truc.jpg" data-group-id="45" class="group45">Voir les photos</a>
<a  href="truc.jpg" data-group-id="30" class="group30">Voir les photos</a>
<a  href="truc.jpg" data-group-id="30" class="group30">Voir les photos</a>

Modifié par beyriem (28 Aug 2012 - 00:21)
Salut,
Merci à toi.
Effectivement, j'aurais difficilement trouvé l’existence des data-attribute... Du coup, je suis allé voir ça : http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html
Super intéressant... Smiley biggrin
Mais je comprends pas encore bien... parce que d'une part ça ne fonctionne pas Smiley decu et il y a un truc, je pige pas :
pourquoi mettre un identifiant à la classe ? ça ne sert plus à rien vu que cet identifiant se trouve sur le data-group-id, non ?
Resalut,
En fait, si, ça fonctionne ! Il fallait mettre ce code dans le footer et non dans le head...
Merci !
Et puis il faut bien que les classes aient le même id que le data... Mais je ne sais pas pourquoi ??? Smiley confus
Je essayer maintenant d'utiliser la variable "group_class" pour la suite...
Je reviendrais certainement vers vous !
Bon, tout fonctionne comme je veux Smiley biggrin
J'explique ce que je voulais, ça pourrait éventuellement en aider d'autres. Sur Spip, j'utilise mediabox (colorbox). Les galeries sont déterminées en fonction de l'attribut "rel" des images.
Perso, j'ai pas mal de galeries sur la même page et toutes sont dynamiques. Il fallait donc que l'attribut "rel" soit généré dynamiquement (#ID_ARTICLE).
<BOUCLE_doc(DOCUMENTS) {id_article}  {doublons} >
<a data-groupid="#ID_ARTICLE" class="galerie#ID_ARTICLE" rel="galerie#ID_ARTICLE" href="#URL_DOCUMENT" title="[(#DESCRIPTIF|couper{120})]">Voir les photos</a>
</BOUCLE_doc>


Grâce à beyriem (merci encore), un seul lien n'apparaît par galerie, et j'utilise la variable pour faire fonctionner dynamiquement mediabox.

$('.droite_content a').each(function(){
  var group_id = $(this).data('groupid');
  var group_class = '.galerie' + group_id;
  $(group_class + ":gt(0)").hide(); 
	
	$(group_class).mediabox({
	rel:group_class,
	transition:"elastic",
	opacity:"0.75",
	slideshow:true,
	preloading:true,
	speed: 1000
});
});
Sujet clos
Aller à