Develop Reference

Imitate click with jQuery to get filtered multigallery by URL

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.

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!

shorthand for .load() ajax links with loader

here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)

Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle

How to specify a variable property for a javascript object when passing arguments to a jquery plugin

I am implementing this jQuery image zoomer on my site. The essence of how it works is I have HTML markup like so: (Fiddle)
<a class="zoom" href="bigimage.jpg">
<img src="smallimage.jpg" />
</a>
I then need to activate the plugin like so: (note the plugin is invoked on the image's parent container, in this case the <a> tag, not the image itself)
$(function() {
$('a.zoom').zoom({url: 'bigimage.jpg'});
});
As you can see I have specified the url to the big image in the activation code. Is there a way to obtain the big image url from the href of the image's parent, or perhaps a data-bigimage attribute in the html?
E.g something like.
$('a.zoom').zoom({
url: $(this).attr('href') // or $(this).data('bigimage')
});
Which clearly doesn't work but hopefully indicates what is required.

The plugin looks for a data-src attribute first if no url parameter is provided, so you can do it as follows : http://jsfiddle.net/3ktNJ/33/
Place the URL to the large image in the data-src attribute :
<a class="zoom">
<img data-src="http://placekitten.com/400/600" src="http://placekitten.com/200/300" />
</a>
<br>
<a class="zoom">
<img data-src="http://placekitten.com/500/700" src="http://placekitten.com/200/300" />
</a>
Call the function with no URL parameter :
$('a.zoom').zoom();

If what you have there doesn't work, you may be able to try:
$(function(){
$('a.zoom').each(function(){
var thisURL = $(this).attr('href');
$(this).zoom({url: thisURL});
});
}
Your fiddle here updated: http://jsfiddle.net/3ktNJ/1/
UPDATE Per OP request, a small change has been made to the plugin. This does not effect the plugin's normal usage:
This section has been edited:
if (!settings.url) {
$urlElement = $source.find('img');
if ($urlElement[0]) {
settings.url = $urlElement.data('src') || $urlElement.attr('src');
}
if (!settings.url) {
return;
}
}
To this: You'll notice I added an extra 'if' statement in here to walk around the URL manager. I'm still not sure why the !settings.url says false, even when it's outputting a real URL string... But this seems to work.
if (!settings.url) {
if ($(target).attr('href')) {
settings.url = $(target).attr('href');
} else {
$urlElement = $source.find('img');
if ($urlElement[0]) {
settings.url = $urlElement.data('src') || $urlElement.attr('src');
}
if (!settings.url) {
return;
}
}
}
UPDATED FIDDLE HERE As an added bonus, specifically for your needs, you do not have to supply the small image's parent href source. It will automatically grab it and use it if you do not supply a URL. You will notice at the bottom of the fiddle that it is not sending any URL, but it is still working as planned. Then if you remove the href in your <a>, it will work normally as before (which is not ideal anyways).
I hope this helps!

If I'm understanding the question correctly...you want to get the href of the parent div of the image...this should do the trick:
$("img").parent(".zoom").attr("href");
I added it to the top line of your fiddle here: http://jsfiddle.net/mN7m3/

Certain hash in URL combaining with on-page click-event

I want to locate if there is a certain hash, eg. #nameofthehash, in the URL and then do stuff with my code. But it doesn't only need to check if the URL contains #nameofthehash, it also needs to check if one of the on-page buttons is clicked. If that's done it needs to run the code.
The code works without the second line. I just don't know how to implement the second line correctly.
$('a[href="#groeien"]').click(function(),
$(location.hash).contains("#groeien") {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
Thanks in advance!
Update: I have created a jsfiddle to show the current situation, http://jsfiddle.net/qeDam/3/

Try to use:
$('a[href="#groeien"]').click(function () {
if(window.location.hash.indexOf("#groeien") > -1) {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
}
});

JQuery hide div based on url hash and string

I'm attempting to hide a div based on the url hash tag. I'm using a jquery plugin called zozo tabs that allows for deep-linking and it shows and hides divs.
There is a particular div on the page (not in the tab area) I would like to hide given the url/s. I've searched but cannot figure it out. Please excuse my javascript noobness!!! I've tried this. No such luck. It doesnt seem to work. Any help would greatly appreciated.
I've tried php but it doesnt work on the hash
To start the plugin creates this type of url
http://localhost:8888/site/funds/#tabbed-nav=fund-strategy
The html is:
<ul>
<li data-link="fund-strategy"><a>Fund Strategy</a></li>
<li data-link="portfolio-characteristics"><a>Portfolio Characteristics</a></li>
<li data-link="performance"><a>Performance</a></li>
</ul>
<div class="strategy">This copy shows when the li is clicked on</div>
This is me attempting to hide a div given the url with js
var jQ = jQuery.noConflict();
jQ(document).ready(function() {
var url = document.location.href;
if (url.indexOf('http://localhost:8888/site/funds/#tabbed-nav=fund-strategy') >= 0) {
jQ('.fourth').hide();
};
});
<div class="fourth">Hide me please!</div>

Just try to use something like this:
var currentHash = window.location.hash;
if (currentHash=="#tabbed-nav=fund-strategy") {
$('.fourth').hide();
}
Be sure that there is a html element with class 'fourth' in your html code. Otherwise this will not hide anything.

I think i pinpointed the problem. The zozo tabs utilizes hashchange. So after hitting my head against the wall and HUGE inspiration from users here. I downloaded the ba.hashchange and wrapped the given answers in a hashchange function here is the code if anyone is interested. This seemed to work.
var jz = jQuery.noConflict();
jz(function(){
jz(window).hashchange( function(){
// Alerts every time the hash changes!
var hash = document.location.hash;
if (hash == '#tabbed-nav=risk' || hash == '#tabbed-nav=fund-strategy') {
jz('.fourths').show();
} else {
jz('.fourths').hide();
}
})
jz(window).hashchange();
});