Mix It Up

Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
1. Grab the Mixitup files

Download the mixitup files and add a folder to your resources named mixitup then add jquery.mixitup.min.js to that folder. 

2. Paste this code into the Head box on the Settings tab.

<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");
$(".category-7").attr("data-myorder", "7");
$(".category-8").attr("data-myorder", "8");

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

</script>

Add a column to your page and give it the an ID of Container. Next add images to your column using the image tool. Give the images a class of category-1 also mix then category-2 also mix and category-3 also mix and so on for as many images as you have.
  Next adjust the script above to match the number of images your using.
   $(".category-1").attr("data-myorder", "1");
I'm using 8 so you see 8 script references.