Image Gallery

[middlemann]

Hey there,

I’m trying figure out the best way to have two sets of filters for the image gallery.

EXAMPLE

Genre: Country, Rock, Pop, Hip Hop
Occasion: Birthday, Graduation, Holiday, Thank You

I know each item can have more than one associated nav link but I don’t want the list(s) of nav links to get messy at the top because there will be a lot of them.

Can i group all the “Genre” nav links into one tab/ toggle and all the “Occasion” nav links into another tab/ toggle without losing their ability to trigger the items on the page below?

---

[Support]

Hello, you can see a similar example of that in this link: https://www.okler.net/previews/porto/12.1.0/portfolio-extra-combination-filters.html

Kind Regards.

---

[middlemann]

I saw that but what I am trying to do is “hide” all the nav links in a tab or toggle or something that can be tapped to open or otherwise display all the nav link choices.

Because on mobile it’s going to get really cluttered as each category is going to have over a dozen nav link options.

so can I tuck the nav links into a toggle or tab without breaking the functionality?

---

[Support]

Hi, unfortunately we don’t have an example of that and you must a customized code for it, this is a way to start that customization:

* Note this is just an example and you must adapt to your content and also do that for both filter (with different IDs).

1) Add the class “d-none” to the “nav nav-pills sort-source” list.

2) Add the dropdown:

<select id="changeFilter">
	<option value="*">Show All</option>
	<option value="websites">Websites</option>
	<option value="logos">Logos</option>
	<option value="brands">Brands</option>
	<option value="medias">Medias</option>
</select>

3) Add JS:

(js/custom.js)

$('#changeFilter').on('change', function() {
	window.location.hash = this.value;
});

Hope that helps to start the customization you want.

Kind Regards.

---

[middlemann]

https://lightninglyrics.com/dev.php

i’m testing this in a private window but i don’t think the .js is firing.

---

[Support]

Add an ID like this:

JS:

$('#genre').on('change', function() {
	$('#genreFilter li[data-option-value=".' + $(this).val() + '"] a').click();
});

---

[middlemann]

and for multiple IDs?

$(‘#genre’).on(‘change’, function() {
$(‘#genreFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
$(‘#occasionFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
});

$(‘#occasion’).on(‘change’, function() {
$(‘#occasionFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
});

---

[middlemann]

i can only get one or the other to work: Genre OR Occasion not both at the same time

ALSO: when I click on on of the navlink choices and try to go back to Show All, show all doesn’t work – all the other choices work though just not that one

I tried:

$(‘#genre’,‘#occasion’).on(‘change’, function() {
$(‘#genreFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
$(‘#occasionFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
});

AND
$(‘#genre’).on(‘change’, function() {
$(‘#genreFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
});

$(‘#occasion’).on(‘change’, function() {
$(‘#occasionFilter li[data-option-value=”.’ + $(this).val() + ‘”] a’).click();
});

---

[Support]

Hello, try this:

$('#genre').on('change', function() {
	$('#genreFilter li[data-option-value=".' + $(this).val() + '"] a').click();
	
	if($(this).val() == '*') {
		$('#genreFilter li:first-child() a').click();
	}
});

$('#ocassion').on('change', function() {
	$('#occasionFilter li[data-option-value=".' + $(this).val() + '"] a').click();
	
	if($(this).val() == '*') {
		$('#occasionFilter li:first-child() a').click();
	}
});

---

[middlemann]

that worked perfectly – thank you!!!!

---

[Author]

Posts