On my homepage I have mixitup working using this:
var containerEl = document.querySelector('.gallery-container');
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.engagement-ceremony'
}
});
I got this from their website. It works fine, but the moment I go to another page I'm getting this error in console:
Uncaught Error: [MixItUp] An invalid selector or element reference was passed to the mixitup factory function
and it's causing my other js on the page to break.
I thought I'd try this instead to see what happens:
var mixer = mixitup('.gallery-container', {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.engagement-ceremony'
}
});
But then I got this error: Uncaught Error: [MixItUp] The provided selector yielded no container element
.
I'm stumped as to why this would error this way.
EDIT
So the only way I could get this to work properly without errors is to take this part of the mixitup script and load it onto my homepage conditionally using php
. A hacky fix that bothers me, but the only way it'll work.
// Gallery Filtering
var containerEl = document.querySelector('.gallery-container');
var mixer;
if (containerEl) {
mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.engagement-ceremony'
}
});
}
I had to wrap the script in a if
statement.