Bonjour,
Je sollicite votre aide car je galere depuis 2 jours sur un truc qui me parait tout simple.

Pour faire simple, j'ai une galerie photo faite avec differents points de vue et la date de la prise de photo
je suis arrivé à filtrer l'affichage de toutes ses photos, selon le point de vue et le mois,
mais je n'arrive pas a modifer le data-group pour que seules les images visible à l'écran s'affichent en popup.
et second soucis, j'ai l'impression que mon bout de code ne boucle pas.

Voici le code

$('.filter-button-group').on( 'click', 'button', function() {
			$(".mix").each(function(){
				if($(this).css('display') === '') {
					$('.fancybox-gallery-actu').attr("data-fancybox-group", "reconstruction-filter");
					console.log("filter")
				} else {
					$('.fancybox-gallery-actu').attr("data-fancybox-group", "reconstruction");
					console.log("no Filter")
				}
					
					
			})
		});

et voici mon code html

			  <form class="controls">
				  
				<fieldset data-filter-group="prise2vue" class="select-wrapper filter-button-group">
					<legend>Choix du point de vue</legend>

					<button class="btn filter" data-toggle=".vue-1">Vue 1</button>
          <button class="btn filter" data-toggle=".vue-2">Vue 2</button>
          <button class="btn filter" data-toggle=".vue-3">Vue 3</button>

				</fieldset>
				  
				<fieldset data-filter-group="photoprise" class="select-wrapper">
					<legend>Choix du mois de la prise de photo</legend>
					
          <button class="btn filter" data-toggle=".janvier">Janvier</button>
          <button class="btn filter" data-toggle=".fevrier">Février</button>
          <button class="btn filter" data-toggle=".mars">Mars</button>
          <button class="btn filter" data-toggle=".avril">Avril</button>
          
				</fieldset>  
				  

			</form>
			
			<div class="container results">

				<div class="mix vue-1 janvier" data-prise2vue="vue-1" data-photoprise="janvier">
					<div class="actu-la-photo">
							<a class="fancybox-gallery-actu" href="https://via.placeholder.com/300/09f/fff.png" data-fancybox-group="reconstruction" title="photo prise le XX Mois" >
							<div class="image-hover img-zoom-in"><img src="https://via.placeholder.com/300/09f/fff.png"></div></a>
					</div>
					<div class="actu-date-photo">XX MOIS</div>
			  </div>
        
        <div class="mix vue-2 fevrier" data-prise2vue="vue-1" data-photoprise="janvier">
					<div class="actu-la-photo">
							<a class="fancybox-gallery-actu" href="https://via.placeholder.com/300/09f/fff.png" data-fancybox-group="reconstruction" title="photo prise le XX Mois" >
							<div class="image-hover img-zoom-in"><img src="https://via.placeholder.com/300/09f/fff.png"></div></a>
					</div>
					<div class="actu-date-photo">XX MOIS</div>
			  </div>
        
        <div class="mix vue-3 mars" data-prise2vue="vue-1" data-photoprise="janvier">
					<div class="actu-la-photo">
							<a class="fancybox-gallery-actu" href="https://via.placeholder.com/300/09f/fff.png" data-fancybox-group="reconstruction" title="photo prise le XX Mois" >
							<div class="image-hover img-zoom-in"><img src="https://via.placeholder.com/300/09f/fff.png"></div></a>
					</div>
					<div class="actu-date-photo">XX MOIS</div>
			  </div>
        
        <div class="mix vue-1 avril" data-prise2vue="vue-1" data-photoprise="janvier">
					<div class="actu-la-photo">
							<a class="fancybox-gallery-actu" href="https://via.placeholder.com/300/09f/fff.png" data-fancybox-group="reconstruction" title="photo prise le XX Mois" >
							<div class="image-hover img-zoom-in"><img src="https://via.placeholder.com/300/09f/fff.png"></div></a>
					</div>
					<div class="actu-date-photo">XX MOIS</div>
			  </div>
				

				<div class="gap"></div>
				<div class="gap"></div>
				<div class="gap"></div>
				<div class="gap"></div>
			</div>
			
            <div class="stop"></div>            
 
        </div>

Bonjour  Mr-frey,

J'ai fais un exemple avec ce que j'ai compris, mais je ne suis pas très sûr

https://codepen.io/Zonecss/pen/pYJZKr

Il est possible d'avoir l'enble du code HTML + CSS +Js pour comprendre comment fonctionne ton script

-
Edité par AliasDmc 20 juillet 2019 à 19:05:00

Bonjour,

J'ai trouvé une solution, qui fonctionne bien apres avoir ajusté le settimeout.

Voila mon exemple, juste sans le fancybox mais cela marche bien sur ma machine,
je sais pas pourquoi des que j'ajoute le fancybox, il me plante tout.

https://codepen.io/frey-day/pen/eqmMRm