Discussion :

[pierrot10]

Bonjour à tous

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

Code HTML :

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

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 HTML :

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

1
2
3
4
 
<div class="gallery">
<!-- ici toutes mes figures -->
</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 jquery :

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

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

[SpaceFrog]

Code :

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

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/

[pierrot10]

Hello
Merci ca marche

Code JQUERY :

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

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 JQUERY :

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

$(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?

[pierrot10]

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

Code JQUERY :

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

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

[jreaux62]

bonjour,

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

Code js :

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

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);
});

[NoSmoking]

Bonjour,

$(this) change selon le contexte.

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

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

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

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.

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 :

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
$(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);
});

[jreaux62]

Bonjour NoSmoking,

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

toi-même

Petit exemple :

Code html :

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

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 :

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

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 :

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

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é
    });
  });
});

[pierrot10]

Bonjour

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

Code JQUERY :

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
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

[NoSmoking]

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 :

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

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

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

Ergonomiquement parlant c'est une bonne chose !