在这篇指南中,将详细介绍如何在页面加载时自动应用 Elementor Gallery Pro 过滤器。通过以下步骤,可以实现在页面加载时自动过滤特定图库的效果。
如何在页面加载时将 Elementor Gallery Pro 元素过滤到特定的图库
![如何在页面加载时自动应用Elementor Gallery Pro过滤器](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
要在页面加载时将 Elementor Gallery Pro 元素过滤到特定的图库,在URL 后面附加 ?data-gallery-index=1
。这样,当页面加载时,特定的图库过滤器将自动打开。
Elementor Gallery Pro 页面加载代码上的过滤器
步骤1:需要在与Elementor Gallery Pro位于同一页面上添加一个 HTML 元素。按以下步骤操作:
![如何在页面加载时自动应用Elementor Gallery Pro过滤器](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
- 打开 Elementor 编辑器,选择你希望添加过滤器的页面。
- 在页面上找到 Gallery Pro 元素的位置。
- 在左侧面板中,拖动一个 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过滤器](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
获取每个 Elementor Gallery Pro 过滤器的 URL,它的工作方式是,重复使用 Elementor Gallery Pro 过滤器标题上的属性,其具有以下逻辑:
如果存在“全部”选项,则其值为“全部”。
对于所有其他的,它遵循索引值,从 0 开始。
第一个非“全部”过滤器的data-gallery-index=0。 下一个过滤器的data-gallery-index=1,依此类推。
只需在你的 URL 中添加?data-gallery-index=0即可在页面加载时打开该图库过滤器。
![如何在页面加载时自动应用Elementor Gallery Pro过滤器](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |
发布者:光子波动,转转请注明出处:https://www.361sale.com/10725/