I am using Isotope to filter a project gallery. I managed to update my gallery by clicking from a menu link on my homepage. However, when I'm on another page and click on one of the links with the 'filter' class to apply a sort and display the content of a category, my button activates for a brief moment then disappears, and as a result, my gallery is not refreshed. Could you please tell me where I'm wrong, it must be a problem of loading but despite my efforts, I couldn't find the problem. I'm sure the solution is simple. Could you please help me? Thank you in advance
my nav with links
<nav class="menu-primary nav-wrap">
<h3 class="title menu-primary__title bold">Freelance</h3>
<ul class="menu-list">
<h4 class="menu-item"><a class="hover-underline-animation" href="#accueil">Accueil</a></h4>
<h4 class="menu-item"><a class="hover-underline-animation" href="#a-propos">À propos</a></h4>
<h4 class="menu-item"><a class="hover-underline-animation" href="#services">Services</a></h4>
</ul>
</nav>
<nav class="nav-wrap">
<h3 class="title menu-primary__title bold">Portfolio</h3>
<ul class="menu-list">
<h4 class="menu-item"><a class="hover-underline-animation filter" data-category="identite-visuelle" href="#identite-visuelle">Identité visuelle</a></h4>
<h4 class="menu-item"><a class="hover-underline-animation filter" data-category="webdesign-sites-internet" href="#webdesign-sites-internet">Webdesign/sitesinternet</a></h4>
<h4 class="menu-item"><a class="hover-underline-animation filter" data-category="print" href="#print">Print</a></h4>
<h4 class="menu-item"><a class="hover-underline-animation filter" data-category="illustration" href="#illustration">Illustrations</a></h4>
</ul>
</nav>
navigation.js
// Isotope
var $container = $('#gallery');
$container.isotope({
itemSelector: '.gallery-item',
layoutMode: 'masonry'
});
var $optionsSets = $('#filters');
$optionsLinks = $optionsSets.find('a');
$optionsLinks.click(function() {
var $this = $(this);
if ($this.hasClass('selected')) {
return false;
}
var selector = $this.attr('data-filter');
$container.isotope({
filter: selector
});
$optionsSets.find('.selected').removeClass('selected');
$this.addClass('selected');
return false;
});
function checkFilter(event) {
// Vérifier si l'élément cliqué a la classe "filter"
if ($(this).hasClass('filter')) {
var filterParam = $(this).attr('data-category');
if (filterParam) {
// Filtrer les éléments de la galerie directement
$('#gallery').isotope({ filter: '.' + filterParam });
// Mettre en surbrillance le bouton de filtrage correspondant dans la galerie
var buttons = $('#filters').find('a');
buttons.removeClass('selected'); // Supprimer la classe 'selected' de tous les boutons
buttons.each(function() {
if ($(this).attr('data-filter') === '.' + filterParam) {
$(this).addClass('selected'); // Ajouter la classe 'selected' au bouton correspondant
}
});
}
}
}
// Clique sur les liens du menu
jQuery('.menu-item a').on('click', function(event) {
checkFilter.call(this);
if (window.location.pathname !== '/') {
// event.preventDefault();
var targetUrl = window.location.origin + '/#' + this.hash.substr(1);
window.location.href = targetUrl;
return;
}
// Récupérer l'ancre
var hash = this.hash;
// Vérifier si une barre oblique "/" est ajoutée avant l'ancre dans l'URL
if (hash.charAt(0) === '/') {
hash = hash.substr(1); // Supprimer la barre oblique
}
// Effectuer l'animation au scroll vers la section
if (hash !== '') {
jQuery('html, body').animate({
scrollTop: jQuery(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
jQuery('#active').prop('checked', false);
});