In dieser Anleitung erfahren Sie mehr darüber, wie Sie Elementor Gallery Pro Filter automatisch beim Laden der Seite anwenden können. Wenn Sie die folgenden Schritte befolgen, können Sie den Effekt der automatischen Filterung einer bestimmten Galerie beim Laden der Seite erzielen.

Wie filtert man Elementor Gallery Pro Elemente auf eine bestimmte Galerie beim Laden der Seite

Zum Einstellen der Elementor Galerie Pro Element, um nach einer bestimmten Galerie zu filtern, indem Sie die URL an das ?data-gallery-index=1. Auf diese Weise werden bestimmte Galeriefilter automatisch geöffnet, wenn die Seite geladen wird.

Filter auf Elementor Gallery Pro Seite laden Code

umziehen1Sie müssen ein HTML-Element auf der gleichen Seite wie Elementor Gallery Pro hinzufügen. Folgen Sie den Schritten unten:

1. Öffnen Sie den Elementor-Editor und wählen Sie die Seite aus, zu der Sie den Filter hinzufügen möchten.
2. Suchen Sie das Element Gallery Pro auf der Seite.
3. Ziehen Sie im linken Bereich ein HTML-Element auf die Seite und platzieren Sie es an derselben Stelle wie das Gallery Pro-Element.

Schritt 2: JavaScript-Code einfügen

Fügen Sie den folgenden JavaScript-Code in ein HTML-Element ein, um beim Laden der Seite einen bestimmten Filter anzuwenden.

document.addEventListener("DOMContentLoaded", function() {
    // URL
    const urlParams = new URLSearchParams(window.location.search);; // URLs können zum Durchsuchen der Galerie verwendet werden, aber sie können auch zum Durchsuchen der Galerie verwendet werden.
    const galleryIndex = urlParams.get('data-gallery-index');

    if (galleryIndex) {
        //Galerie-Pro-Element
        const galleryProElement = document.querySelector('.your-gallery-pro-class'); // durch den tatsächlichen Klassennamen Ihres Gallery Pro-Elements ersetzen
        if (galleryProElement) {
            // Simulieren Sie einen Klick oder eine Auswahl, um den Filter anzuwenden
            const filterButtons = galleryProElement.querySelectorAll('.gallery-filter-button'); // ersetzen Sie mit dem tatsächlichen Klassennamen der Filterschaltfläche
            if (filterButtons[galleryIndex]) {
                filterButtons[galleryIndex].click();
            }
        }
    }
});
</script

Stellen Sie sicher, dass Sie den Code in der .ihre-galerie-pro-klasse im Gesang antworten .galerie-filter-button Ersetzen Sie ihn durch den Namen der Klasse, die Sie tatsächlich verwenden.

Schritt 3: Aktualisieren Sie die URL der Seite

Fügen Sie die URL der zu filternden Seite mit ?data-gallery-index=1(oder andere Indexwerte), zum Beispiel:

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

Bestimmte Galeriefilter werden automatisch geöffnet, wenn die Seite geladen wird.

Zusammenfassung:

Holen Sie sich die URL für jeden Elementor Gallery Pro Filter, der durch die Wiederverwendung der Attribute auf dem Elementor Gallery Pro Filter Titel mit der folgenden Logik funktioniert:

Wenn die Option "Alle" vorhanden ist, lautet der Wert "Alle".

Bei allen anderen folgt er dem Indexwert, beginnend bei 0.

erstefalsch"Alle" FilterDaten-Galerie-Index=0. Der nächste Filter in derDaten-Galerie-Index=1Und so weiter.

Fügen Sie einfach die?data-gallery-index=0Damit können Sie diesen Galeriefilter beim Laden der Seite öffnen.