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