Cacher tous les éléments sauf celui cliqué

Version imprimable

Bonjour à tous

J'ai cette structure qui est répétée 10 fois
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <figure class="fig"> <img src="[[++site_url]][[+tv.img-actualite]]" alt="[[+pagetitle]]" class="img-fluid image"> <figcaption class="overlay"> <div class="text"> <h4>[[+pagetitle]]</h4> [[+content]] </div> </figcaption> </figure>
Elles se trouvent dans un wrapper
Code:

1 2 3 4 <div class="gallery">  </div>
Je souhaiterais faire en sorte que lorsque je clique sur une figure, toutes les autres figures se cache, puis que le figcaption s'affiche à droite (ou à gauche si l'image se trouve à droite du wrapper 'gallery').

Ce que j'essaye de faire déjà est de cacher toutes les figures à l'exception de celui qui vient de cliquer.

Ceci fonctionne, mais celui que j'ai cliqué disparait aussi
Code:

1 2 3 4 5 6 7 8 9 10 11 $('#page_5 .gallery figure').on("click", function() { $(this).css("border","1px solid red"); $(this).parent().parent().find('.gallery').each(function(){ $(this).fadeOut(300); }); });
Puis, après 3 secondes, j'aimerais que tous les éléments caché réapparaisse.

Merci pour vos lumières

28/06/2021, 07h55
SpaceFrog
Code:

1 2 $(this).silbings().not(this)
sélectionne tous les éléments frères sauf celui cliqué

d'ailleurs même pas besoin du not(this)...

https://jsfiddle.net/g76yep21/
28/06/2021, 08h51
pierrot10
Hello
Merci ca marche
Code:

1 2 3 4 5 6 7 8 $(this).addClass("clicked"); $(this).siblings().fadeOut(300); setTimeout(function(){ $(this).children('.overlay').fadeIn(300); alert('dd'); },1000);
Le problème que je rencontre, maintenant, j'aimerais un petit délais après le sibling.fadeOut, avant que le texte apparait.
J'ai mis ce setTime, mais la ligne

Code:

$(this).children('.overlay').fadeIn(300);

ne fonctionne pas quand elle est dans le setTimeout.
Par contre l'alert() fonctionne.

J'avais aussi essayé en remplaçant le children par le find.

Donc comment laisser le temps que toutes mes boites disparaissent avant que le texte de la boite cliuqé apparaisse?

J'essaye mille trucs sans succès
Voici ma dernière tentative pour qu'après le sibling/fadeout, le reste s'apique
Code:

1 2 3 4 5 6 7 8 $(this).siblings().fadeOut(300, function(){ alert('fff'); $(this).parent().removeClass("galleryWebkit"); $(this).addClass("clicked"); $(this).find('.overlay').hide().delay(300).fadeIn(300); });
Mais tout ce qui se trouve dans le callback du fadeout ne s'applique pas :aie:

bonjour,

$(this) change selon le contexte.
Il faut définir de quoi on parle.

Code:

1
2
3
4
5
6
7
let ceci = $(this);
ceci.siblings().fadeOut(300, function(){
	alert('fff');		
	ceci.parent().removeClass("galleryWebkit");					
	ceci.addClass("clicked");
	ceci.find('.overlay').hide().delay(300).fadeIn(300);
});

Bonjour,

Citation:

Envoyé par jreaux62

$(this) change selon le contexte.

:nono: le $(this) et bien le même dans ce cas.

Citation:

Envoyé par pierrot10

Mais tout ce qui se trouve dans le callback du fadeout ne s'applique pas :aie:

ne serait ce pas plutôt que tu n'obtiens pas ce que tu souhaites !

Citation:

Envoyé par pierrot10

Ce que j'essaye de faire déjà est de cacher toutes les figures à l'exception de celui qui vient de cliquer.

Ça c'est donc réglé via l'utilisation de siblings.

Citation:

Envoyé par pierrot10

Puis, après 3 secondes, j'aimerais que tous les éléments caché réapparaisse.

Là il y a un soucis d'affectation et de hiérarchisation de tes actions.
De plus, d'après la construction HTML que tu montres, si tu caches les éléments .overlay ils n'apparaitront donc plus par la suite.
Lorsque tu écris : $(this).find('.overlay').hide().delay(300).fadeIn(300), les méthodes delay et fadeIn s'appliquent à l'élément .overlay, est ce que tu veux ?

Je partirais sur quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(this).siblings().fadeOut(300, function() { $(this) .parent() .removeClass("galleryWebkit"); /* pas compris l'utilité !! $(this) .find('.overlay') .hide() /*--*/ $(this) .addClass("clicked") .delay(3000) // le delay est en ms, ici 3s donc .fadeIn(300); });

Bonjour NoSmoking,

Citation:

Envoyé par NoSmoking

:nono: le $(this) et bien le même dans ce cas.

:nono: toi-même ;)

Petit exemple :
Code:

1 2 3 4 5 <div>DIV 1</div> <div>DIV 2</div> <div>DIV 3</div> <div>DIV 4</div> <div>DIV 5</div>
Code:

1 2 3 4 5 6 7 $(function(){ $('div').on('click',function() { $(this).siblings().fadeOut(300, function(){ // CE $(this) correspond au DIV cliqué $(this).addClass("clicked"); // CE $(this) correspond aux DIVs 'siblings' }); }); });
La classe "clicked" est alors assignée aux "siblings".
Pas glop. :(

Pour que ce soit bien le DIV cliqué qui prenne la classe "clicked", il faut écrire :
Code:

1 2 3 4 5 6 7 8 $(function(){ $('div').on('click',function() { ce_div = $(this); ce_div.siblings().fadeOut(300, function(){ // ce_div correspond au DIV cliqué ce_div.addClass("clicked"); // ce_div correspond TOUJOURS au DIV cliqué }); }); });

Bonjour

Merci pour vos réponses. Grâce à vos suggestions, j'ai réussi à faire un truc qui fonctionne comme cela

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
 
$('#page_5 .gallery figure').on('click', function()
		{
			ce = $(this);
			if($(this).hasClass("clicked")){
 
				ce.removeClass("clicked");
 
				ce.find('.overlay').fadeOut(300, function(){
					ce.parent().removeClass("galleryWebkit-2col");
			    	ce.parent().addClass("galleryWebkit-3col");
			    	ce.siblings().fadeIn(300); 
				});	
 
			}
			else
			{
 
				ce.siblings().fadeOut(300, function(){ // ce_div correspond au DIV cliqué
			    	ce.addClass("clicked"); // ce_div correspond TOUJOURS au DIV cliqué
					ce.parent().removeClass("galleryWebkit-3col");
			    	ce.parent().addClass("galleryWebkit-2col");
			    	ce.find('.overlay').fadeIn(300);
			    }); 
 
			}
 
		});

Comme vous le constatez, j'ai abandonné le delai de restauration. Je le restaure au "re-"click

Effectivement cela va dépendre ce que l’on à compris du souhait de pierrot10, et si l'on souhaite n’ajouter la classe qu’à l'élément déclencheur la hiérarchisation des affectations est on ne peut « maladroite », comme je l’ai dit.

En mettant l’affectation dans la fonction de rappel, tous les éléments ciblés seront parcourus et on fera l'affectation autant de fois qu’il y a d'éléments, ce qui n'a aucun sens.
Code:

1 2 3 4 5 6 7 8 9 10 11 $(this) // action sur le $this .addClass("clicked") // action sur les éléments ciblés uniquement .siblings() .fadeOut(300, function() { // seuls les éléments ciblés devraient être traités $(this) .delay(3000) .fadeIn(300); });
Le ce= $(this) reste quand même une bonne solution pour mettre en « cache » l’objet.

Mais bon si pierrot10 est content de son code, tout va bien :aie:

Citation:

Envoyé par pierrot10

Comme vous le constatez, j'ai abandonné le delai de restauration. Je le restaure au "re-"click

Ergonomiquement parlant c'est une bonne chose !