Если второпях набросанная демка, которую вы видите на этой страничке, заинтересовала - зайдите на сайт проекта , внимательно полистайте доки, попробуйте поработать с интерактивным демо на codepen-e... все очень несложно и очень хорошо документирвоано. В частности, анимация, которую вы имеете возможность тщательно сформировать "под себя", нажав на шестеренку в правом верхнем углу главной страницы MixItUp и, скажем, возможность начать демонстрацию не со всех категорий контента, а только с одной - достигаются всего лишь несколькими строчками кода, например:

<script type="text/javascript">
$(function(){
$('#Container').mixItUp({
animation: {
duration: 700,
effects: 'stagger(34ms) rotateZ(20deg) fade scale(0.41)',
easing: 'ease'
},
load: {
filter: '.category-1',
}
});
});
</script>

Внимание, в Opera MixItUp не работает. А разве должен? Кажется, не существует уже такого браузера - Opera. Канул в лету.

Ок, а сейчас я подробно расскажу о том, как прикрутить к MixItUp крайне полезную фичу - pop-up, т.е. всплывающее окно (этой информации нет на официальной страничке проекта - непростительное упущение, согласитесь!) Попробуйте вызвать pop-up-окошко, кликнув по любой из картинок (на скорую руку в ход пошли изображения выполненных проектов, позаимствованные на страничке Заказать сайт). Получилось?

Вы можете увидеть в MixItUp очередную галерею изображений, но это будет ошибкой. MixItUp - не галерея, для данного плагина совершенно все равно, с каким контентом работать - с картинками ли, с текстом.. не имеет значения.

Весь рабочий код демки без каких-либо купюр доступен на форуме; рекомендую открыть страничку по ссылке. Наши с вами действия:

Нам понадобится файл jQuery_modal.js, содержащий приведенный ниже код. В скобках замечу: height и width в третьей строчке обозначают размеры всплывающего окна, не стесняйтесь их менять:

function jQuery_modal(obj){
if ( 0 == jQuery(obj).attr('longdesc').indexOf('#') ){
jQuery(jQuery(obj).attr('longdesc')).dialog({ height: 600, width: 700, modal: true });
}
else{
jQuery("#dialog-modal").text(jQuery(obj).attr('longdesc'));
jQuery("#dialog-modal").dialog({ height: 240, modal: true });
}
}

Рабочий контейнер способен выглядеть у нас с вами примерно вот так:

<div id="Container" class="container1>
<li class="mix category-1"><img src="/image/1.jpg" longdesc="#1" onclick="jQuery_modal(this)" alt=""></li>
<li class="mix category-1"><img src="/image/2.jpg" longdesc="#2" onclick="jQuery_modal(this)" alt=""></li>
.….
</ul>
</div>

Как видите, указана категория (именно на ее основе происходит фильтрация), указан путь к изображению, указан onclick (без него вообще ничего не получится), а также longdesc… на последнем остановимся чуть подробнее. Что же это за зверь такой?

Все ок: зверь, при ближайшем рассмотрении оказывается неопасен и ничуть не кусается; в самом конце нашего с вами HTML нам придется указать вот такие примерно дивы:

<div id="dialog-modal" style="display: none"></div>
<div id="1" style="display: none"><img src="/image/1.jpg" /></div>
<div id="2" style="display: none"><img src="/image/2.jpg" /></div>
.….

Думаю, с этим вопросов не возникает? longdesc="#1" в основном нашем контейнере инициирует по onclick появление в качестве popup - картинки, div которой также 1, etc. И так далее. Кстати - совсем необязательно указывать одну и ту же картинку и для превью и для popup, как в моем примере.

И последнее. Скрипты, которые всегда оптимально вынести в head, выглядят так:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jQuery_modal.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/css/styles.css">
<link rel="stylesheet" href="/jquery-ui-themes/start/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function(){
 $('#Container').mixItUp();
});
</script>

Что там еще? - да, jquery-ui-themes можно тщательно повыбирать здесь, как видите, я указал линк на одну из понравившихся шкурок (скинов). Вот и все, ничего сложного... повторюсь, лентяи вполне могут оставить комментарии до лучших времен и просто поэкспериментировать с приведенным на форуме кодом, все будет работать буквально "из коробки".

Обратите внимание на следующий момент - отфильтрованный описанным способом контент не только эффектно подсвечен анимацией, но и полностью респонсивен.  А это означает, что мы с вами не зря потратили время - отзывчивое (респонсивное) оформление нынче в моде. Успехов вам!