用jQuery模拟点击获取按URL过滤的多图库

Question

我有一个使用 Elementor 创建的网站。网站属于摄影师。他在那里有一个 Elementor Multigallery，顶部有过滤器。我需要创建外部链接，它可以将您带到子页面并直接仅显示过滤后的项目。

这是 multigal 的链接：https://chosephoto.com/photo/

我需要做类似的事情，当我进入https://chosephoto.com/photo/#fashion时，我将收到当前的子页面，但它只会显示画廊“fashion”中的图像。并非所有图像。

我想过模仿jQuery通过查询字符串点击（获取/#....的值），然后让jquery点击with属性，该属性等于查询字符串中的值，但是我什至不知道，如何才能我用 jQuery 来做。我是 jQuery 初学者。

谢谢您的帮助。

Answer 1

所以，最后，这是我的“解决方案”

$ = jQuery;
$(window).bind('load', function() {
    var hash = $(location).prop('hash').substr(1);
    if(hash == 'portrait') {
        $('a[data-gallery-index=0]').trigger('click');
    } else if (hash == 'fashion') {
        $('a[data-gallery-index=1]').trigger('click');
    } else if (hash == 'product') {
        $('a[data-gallery-index=2]').trigger('click');
    } else if (hash == 'sky-photo') {
        $('a[data-gallery-index=3]').trigger('click');
    } else {
        $('a[data-gallery-index=all]').trigger('click');
    }
});

我必须使用 .bind('load')，而不是 document.ready() 函数，因为库在文档准备好后执行额外的 javascript（并且它覆盖了我的代码）。

您可以根据末尾的主题标签调用过滤器并获取 URL。例如，此 URL：https://chosephoto.com/photo/#fashion 将过滤 FASHION 图库。

我的知识还不够，无法做得更好。但它有效！

Answer 2

我一直在寻找工作代码，但没有任何效果，这就是我所做的，适用于链接 WordPress 画廊中的画廊类别

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    if (window.location.hash) {
        // Opacity 0 only for # url
        var galleryContainer = $('.elementor-gallery__container');
        galleryContainer.css('opacity', '0');
        
        // animate opacity for smooth display
        galleryContainer.css('transition', 'opacity 0.3s ease-in-out');
        
        setTimeout(function() {
            var hash = window.location.hash.substring(1);
            var galleryItem = $('.elementor-item.elementor-gallery-title[data-gallery-index="' + hash + '"]');
            
            if (galleryItem.length) {
                galleryItem.click(); // simulate clicking
            }
            // smooth gallery display
            galleryContainer.css('opacity', '1');
        }, 300); // delay - doesn't work without a delay
    }
});
</script>

所以此代码适用于带有画廊的页面，并且您可以将类别链接为 #0 、#1 等（数字与画廊索引相同）