isotope gallery not updated on load from another page

35 Views Asked by At

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

There are 0 best solutions below