You can add data-filter to the buttons in the same way Eric done in his script for data-myorder
Just add the following to Eric's script

$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", "category-1");
$(".filter-2").attr("data-filter", category-2");

Then give each button the corresponding class like so

<button class="filter filter-all">All</button>
<button class="filter filter-1">Category 1</button>
<button class="filter filter-2">Category 2</button>

Well James D - thank you for trying to help me out but I still have no improvement. This is probably something I should not have attempted to do. Everything is in place & "look" good enough so far but these controls are not put together correctly so they do not work. They just do a random sort just as a page refresh does. They are supposed to isolate the corresponding category that is clicked but I get nothing different. Certainly the mistake is on me, but since I learn as needed I have no idea where to look.
Thanks again for the consideration of assistance, but this is not my specialty. Dealing with the best I can do is all I can expect for now. Maybe I will have better luck down the road. For now I will remain stumped.

https://mixitup.kunkalabs.com/learn/tut … t-started/

Oops, I had forgotten to add the periods in the classes???? should be

$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", ".category-1");
$(".filter-2").attr("data-filter", ".category-2");

this is what is on my "head" location on my page:

<style>
#Container .mix{
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="mixitup/jquery.mixitup.min.js"></script>
<script>
$(document).ready(function() {

$(".category-1").attr("data-myorder", "1");
$(".category-2").attr("data-myorder", "2");
$(".category-3").attr("data-myorder", "3");
$(".category-4").attr("data-myorder", "4");
$(".category-5").attr("data-myorder", "5");
$(".category-6").attr("data-myorder", "6");

$('#Container').mixItUp({
load: {
sort: 'random'
}
});
});

$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", ".category-1");
$(".filter-2").attr("data-filter", .category-2");
$(".filter-3").attr("data-filter", .category-3");
$(".filter-4").attr("data-filter", .category-4");
$(".filter-5").attr("data-filter", .category-5");
$(".filter-6").attr("data-filter", .category-6");

</script>

All buttons have a class of "filter" & "filter-all" "filter-1" "filter-2" and so on to "filter-6"
All target items (picture links) have a class of "mix" and the category tag of "category-1" thru "category-6"

What am I missing?

Change it to

<script>
$(document).ready(function() {
$(".category-1").attr("data-myorder", "1");
$(".category-2").attr("data-myorder", "2");
$(".category-3").attr("data-myorder", "3");
$(".category-4").attr("data-myorder", "4");
$(".category-5").attr("data-myorder", "5");
$(".category-6").attr("data-myorder", "6");
$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", ".category-1");
$(".filter-2").attr("data-filter", .category-2");
$(".filter-3").attr("data-filter", .category-3");
$(".filter-4").attr("data-filter", .category-4");
$(".filter-5").attr("data-filter", .category-5");
$(".filter-6").attr("data-filter", .category-6");
$('#Container').mixItUp({
load: {
sort: 'random'
}
});
});
</script>

Just noticed that there were missing quotation marks

<script>
$(document).ready(function() {
$(".category-1").attr("data-myorder", "1");
$(".category-2").attr("data-myorder", "2");
$(".category-3").attr("data-myorder", "3");
$(".category-4").attr("data-myorder", "4");
$(".category-5").attr("data-myorder", "5");
$(".category-6").attr("data-myorder", "6");
$(".filter-all").attr("data-filter", "all");
$(".filter-1").attr("data-filter", ".category-1");
$(".filter-2").attr("data-filter", ".category-2");
$(".filter-3").attr("data-filter", ".category-3");
$(".filter-4").attr("data-filter", ".category-4");
$(".filter-5").attr("data-filter", ".category-5");
$(".filter-6").attr("data-filter", ".category-6");
$('#Container').mixItUp({
load: {
sort: 'random'
}
});
});
</script>

Once again thank you but these "filter" buttons still do not work for me. It was a nice idea to do this, but I have to admit defeat here. No fancy gallery for me. All images disappear now. Nothing visible. The art of losing is winning here.

For anyone reading this.... is this even possible? has anyone even been able to? it is even worth my time anymore?

Ok, I got it working! I have attached a .rsd file
Got some help from here https://codepen.io/patrickkunka/pen/lqnah

James D - thank you for taking the time to do that. Not sure when I'll get it going as I have accomplished very little even after looking at your file. I transferred tags & added the header/ footer that you did & it still does not work for me. Out of my range apparently. Hopefully I will get it to work at some point, but for now settling for as-is will be my case. Heck I cannot even get my containers to act the same as yours. How you got 6 small containers in 1 column is beyond me. Again, all of my settings seem to be the same as yours but nope. Was hoping that I could assign the corresponding tags to my page without changing to containers but nope. I have a column with a container with 24 images. My 6 filters do not work on them. Re-building as yours is, with a column with containers for each image isn't working out either. At some point I will get lucky (hopefully) & it will work. Thanks again.