Dans ce guide, vous apprendrez comment appliquer automatiquement les filtres d'Elementor Gallery Pro au chargement de la page. En suivant les étapes ci-dessous, vous pouvez obtenir l'effet de filtrage automatique d'une galerie spécifique au chargement de la page.

Comment filtrer les éléments d'Elementor Gallery Pro vers une galerie spécifique lors du chargement de la page

Pour régler la Elementor Gallery Pro pour filtrer une galerie spécifique, en ajoutant l'URL à l'élément ?data-gallery-index=1. De cette manière, les filtres spécifiques de la galerie s'ouvriront automatiquement au chargement de la page.

Filtres sur le code de chargement de la page d'Elementor Gallery Pro

déplacer1Vous devez ajouter un élément HTML sur la même page qu'Elementor Gallery Pro. Suivez les étapes ci-dessous :

1. Ouvrez l'éditeur Elementor et sélectionnez la page à laquelle vous souhaitez ajouter le filtre.
2. Localisez l'élément Gallery Pro sur la page.
3. Dans le panneau de gauche, faites glisser un élément HTML sur la page et placez-le à la même position que l'élément Gallery Pro.

Étape 2 : Insérer le code JavaScript

Insérez le code JavaScript suivant dans un élément HTML pour appliquer un filtre spécifique au chargement de la page.

document.addEventListener("DOMContentLoaded", function() {
    // URL
    const urlParams = new URLSearchParams(window.location.search); ; // Les URL peuvent être utilisées pour rechercher la galerie, mais elles peuvent être utilisées pour rechercher la galerie.
    const galleryIndex = urlParams.get('data-gallery-index') ;

    if (galleryIndex) {
        //Élément Pro de la galerie
        const galleryProElement = document.querySelector('.your-gallery-pro-class') ; // remplacer par le nom de la classe de votre élément Gallery Pro
        if (galleryProElement) {
            // Simuler un clic ou une sélection pour appliquer le filtre
            const filterButtons = galleryProElement.querySelectorAll('.gallery-filter-button') ; // remplacer par le nom de la classe de votre bouton de filtre
            if (filterButtons[galleryIndex]) {
                filterButtons[galleryIndex].click() ;
            }
        }
    }
}) ;
</script

Veillez à placer le code dans le fichier .your-gallery-pro-class répondre en chantant .gallery-filter-button Remplacez-le par le nom de la classe que vous utilisez actuellement.

Étape 3 : Mise à jour de l'URL de la page

Ajouter l'URL de la page à filtrer avec ?data-gallery-index=1(ou d'autres valeurs d'index), par exemple :

https://yourwebsite.com/your-page?data-gallery-index=1

Les filtres spécifiques de la galerie s'ouvrent automatiquement au chargement de la page.

Résumé :

Obtenir l'URL de chaque filtre Elementor Gallery Pro, qui fonctionne en réutilisant les attributs du titre du filtre Elementor Gallery Pro avec la logique suivante :

Si l'option "Tous" est présente, la valeur est "Tous".

Pour tous les autres, il suit la valeur de l'indice, à partir de 0.

premierincorrect"Filtres "Tousdata-gallery-index=0. Le filtre suivant dans ledata-gallery-index=1Et ainsi de suite.

Il suffit d'ajouter le?data-gallery-index=0Cela vous permet d'ouvrir le filtre de la galerie au chargement de la page.