Imitate click with jQuery to get filtered multigallery by URL

Question

I have website, created with Elementor. Website belongs to photographer. He has got there an Elementor Multigallery, with filter at the top. I need to create external links, which can bring you to the subpage and directly show only filtered items.

Here's the link to multigal: https://chosephoto.com/photo/

I need to do something like that, when I enter the https://chosephoto.com/photo/#fashion I will received the current subpage, but it will shows only images from gallery "fashion". Not all images.

I thought about imitating jQuery click by query string (get the value of /#....) and then do the jquery click the with attribute, which equals the value in query string, However I even don't know, how can I do it with jQuery. I am jQuery beginner.

Thank you for a help.

Answer 1

So, finally, here's my "solution"

$ = 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');
    }
});

I had to use .bind('load'), instead of document.ready() function, because the gallery do the additional javascript after the document is ready (and it has overwritten my code).

You can call the filter with getting the URL, based on the hashtag at the end. For example this URL: https://chosephoto.com/photo/#fashion will filter the FASHION gallery.

My knowledges are not enough, to do it better way. But it works!