何在页面加载时自动应用Elementor Gallery Pro过滤器

在这篇指南中,将详细介绍如何在页面加载时自动应用 Elementor Gallery Pro 过滤器。通过以下步骤,可以实现在页面加载时自动过滤特定图库的效果。

如何在页面加载时将 Elementor Gallery Pro 元素过滤到特定的图库

何在页面加载时自动应用Elementor Gallery Pro过滤器

要在页面加载时将 Elementor Gallery Pro 元素过滤到特定的图库,在URL 后面附加 ?data-gallery-index=1。这样,当页面加载时,特定的图库过滤器将自动打开。

Elementor Gallery Pro 页面加载代码上的过滤器

步骤1:需要在与Elementor Gallery Pro位于同一页面上添加一个 HTML 元素。按以下步骤操作:

何在页面加载时自动应用Elementor Gallery Pro过滤器
  1. 打开 Elementor 编辑器,选择你希望添加过滤器的页面。
  2. 在页面上找到 Gallery Pro 元素的位置。
  3. 在左侧面板中,拖动一个 HTML 元素到页面上,并将其放置在与 Gallery Pro 元素相同的位置。

步骤2:插入 JavaScript 代码

在 HTML 元素中插入以下 JavaScript 代码,以便在页面加载时应用特定的过滤器。

<script>
document.addEventListener("DOMContentLoaded", function() {
    // URL
    const urlParams = new URLSearchParams(window.location.search);
    const galleryIndex = urlParams.get('data-gallery-index');

    if (galleryIndex) {
        //Gallery Pro元素
        const galleryProElement = document.querySelector('.your-gallery-pro-class'); // 替换为你的Gallery Pro元素的实际类名
        if (galleryProElement) {
            // 模拟点击或选择操作来应用过滤器
            const filterButtons = galleryProElement.querySelectorAll('.gallery-filter-button'); // 替换为你实际过滤按钮类名
            if (filterButtons[galleryIndex]) {
                filterButtons[galleryIndex].click();
            }
        }
    }
});
</script>

确保将代码中的 .your-gallery-pro-class.gallery-filter-button 替换为你实际使用的类名。

步骤3:更新页面 URL

在需要过滤的页面 URL 后附加 ?data-gallery-index=1(或其它索引值),例如:

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

当页面加载时,特定的图库过滤器将自动打开。

总结:

何在页面加载时自动应用Elementor Gallery Pro过滤器

获取每个 Elementor Gallery Pro 过滤器的 URL,它的工作方式是,重复使用 Elementor Gallery Pro 过滤器标题上的属性,其具有以下逻辑:

如果存在“全部”选项,则其值为“全部”。

对于所有其他的,它遵循索引值,从 0 开始。

第一个“全部”过滤器的data-gallery-index=0。 下一个过滤器的data-gallery-index=1,依此类推。

只需在你的 URL 中添加?data-gallery-index=0即可在页面加载时打开该图库过滤器。

何在页面加载时自动应用Elementor Gallery Pro过滤器

联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10725/

(1)
上一篇 2024年 5月 29日 下午2:26
下一篇 2024年 5月 30日 上午10:08

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!