Discussion :

[boubourse92]

Salut tous le monde,

Malgré mes recherches sur le net , je n'arrive pas a mettre une fonction pour filtrer mes images en fonction de la balise "alt"
J'ai essayé plusieurs codes trouvés sur le net mais rien qui ne fonctionne correctement.
Dans beaucoup de plugin il utilise la balise data- ... mais dans mon cas j'utilise déjà unitegallery.js qui écrase les balises que je pourrais ajouter dans "img" à part le "alt".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="row nav col-xl-8">
		            <button class="all">All</button>
		            <button class="paysages">Paysages</button>
		            <button class="animaux">Animaux</button>
		            <button class="fleurs">Fleurs</button>
</div>
 
<div class="row col-xl-10">
       <div id="gallery">
 
                        <?php
                            $liste_images = scandir ("img/"); // scan du repertoire image
                            $liste_images1= array_diff($liste_images, array('.', '..','.DS_Store')); //retirer les valeurs "." ".." ".DSStore"
                            $i = 0;
                                foreach($liste_images1 as $images) { //modification du nom du fichier pour $filter
                                    $remove_numbers= preg_replace('/[0-9]+/', '', $images); // suprimer les numéros des fichiers
                                    $filter= (basename($remove_numbers, '.jpg')); // supprimer ".jpg" des fichiers                  
                                    echo"<img src=\"img/$images\" alt=\"$filter\">"; //affiche l'image 
                                    }
                        ?>
       	</div>
 
</div>

j'ai déjà le début ^^:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
jQuery.ready(function() {
$(".button").click(function(){ 
 $(".alt")
 
});

d'avance merci :-)

[psychadelic]

filtrer mes images en fonction de la balise "alt"

Il est impossible de pouvoir filtrer quoi que ce soit en HTML sur la balise "alt" pour la simple et bonne raison que cette balise n'existe pas.

en revanche la balise "img" utilise "alt" comme attribut

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( "#gallery img" ).each(function() {
  $( this ).attr( "alt" ) ...

mais l'attribut "alt" n'est pas fait pour y placer une valeur de filtre, il vaut mieux utiliser un attribut data => https://developer.mozilla.org/fr/App...tributs_donnes
qui se manipule en jQuery avec une méthode data => http://api.jquery.com/data/

[boubourse92]

Salut psychadelic

Pour l'attribut data on est d'accord , mais comme je disais unitedgallery.js que j'utilise comme plugin écrase toute les attribus dans la balise image
Le seul attribue qui n'est pas écrasé est "alt", je cherche donc une solution de contournement.

[psychadelic]

mais comme je disais unitedgallery.js que j'utilise comme plugin écrase tous les attributs dans la balise image

ben, comme je n'ai pas réussi à le deviner et que de toutes façons je ne donnais qu'un conseil, je dois bien t'avouer que cela m'est un peu indifférent...

Ceci étant tu ne dis mots sur la solution que je te propose, te serait-elle aussi indifférente ??
dois-regretter d'avoir pris le temps de te répondre ?

[NoSmoking]

Bonjour,
rien ne t'empêche de filtrer ta demande, via un sélecteur, en utilisant l'attribut alt, qui même si il n'est pas « fait pour cela » peut contenir un élément de tri exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/icone-plus.png" alt="icone [32x32] plus">

le filtre peut dans ce cas se faire par exemple sur la présence de 32x32, sans les crochets ceci étant réservés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$("img").hide();
$("img[alt*=32x32]").show();

• Plus d'info sur les sélecteurs CSS3, qui se sont inspirés de la façon de faire de jQuery, 6.3. Attribute selectors.

• Tu peux retrouver ces informations dans le §3. jQuery et le DOM, publication de Bovino.

Nota :

... mais dans mon cas j'utilise déjà unitegallery.js qui écrase les balises que je pourrais ajouter dans "img" à part le "alt".

cela me surprend quand même !!