Cómo aplicar automáticamente los filtros de Elementor Gallery Pro al cargar la página

En esta guía, usted aprenderá más acerca de cómo aplicar automáticamente Elementor Gallery Pro filtros en la carga de la página. Siguiendo los pasos a continuación, se puede lograr el efecto de filtrar automáticamente una galería específica en la carga de la página.

Cómo filtrar elementos de Elementor Gallery Pro a una galería específica al cargar la página

Para ajustar el Galería Elementor Pro para filtrar una galería específica añadiendo la URL al elemento ?data-gallery-index=1. De este modo, los filtros específicos de la galería se abrirán automáticamente al cargar la página.

Filtros en Elementor Gallery Pro Código de carga de página

mover1Para ello, debe añadir un elemento HTML en la misma página que Elementor Gallery Pro. Siga los pasos que se indican a continuación:

1. Abra el editor de Elementor y seleccione la página a la que desea añadir el filtro.
2. Localice el elemento Gallery Pro en la página.
3. En el panel izquierdo, arrastre un elemento HTML a la página y colóquelo en la misma posición que el elemento Gallery Pro.

Paso 2: Insertar código JavaScript

Inserte el siguiente código JavaScript en un elemento HTML para aplicar un filtro específico cuando se cargue la página.

document.addEventListener("DOMContentLoaded", function() {
    // URL
    const urlParams = new URLSearchParams(window.location.search);; // Las URL se pueden utilizar para buscar en la galería, pero también se pueden utilizar para buscar en la galería.
    const galleryIndex = urlParams.get('data-gallery-index');

    if (galleryIndex) {
        //Elemento galleryPro
        const galleryProElement = document.querySelector('.su-galeria-pro-clase'); // reemplazar con el nombre real de la clase de su elemento Gallery Pro
        if (galleryProElement) {
            // Simular un clic o selección para aplicar el filtro
            const filterButtons = galleryProElement.querySelectorAll('.gallery-filter-button'); // sustitúyalo por el nombre real de su clase de botón de filtro
            if (filterButtons[galleryIndex]) {
                filterButtons[galleryIndex].click();
            }
        }
    }
});
</script

Asegúrese de poner el código en el .tu-galeria-pro-class responder cantando .gallery-filter-button Sustitúyalo por el nombre de la clase que está utilizando realmente.

Paso 3: Actualizar la URL de la página

Añada la URL de la página que desea filtrar con ?data-gallery-index=1(u otros valores de índice), por ejemplo:

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

Los filtros específicos de la galería se abrirán automáticamente al cargar la página.

Resumen:

Obtiene la URL de cada filtro de Elementor Gallery Pro, que funciona reutilizando los atributos del título del filtro de Elementor Gallery Pro con la siguiente lógica:

Si la opción "Todos" está presente, el valor es "Todos".

Para todos los demás, sigue el valor del índice, empezando por 0.

primeroen-"Filtros "Todosdata-gallery-index=0. El siguiente filtro deldata-gallery-index=1Y así sucesivamente.

Basta con añadir el?data-gallery-index=0Esto permite abrir este filtro de galería cuando se carga la página.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres