Pop-up для MixItUp

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

 Если второпях набросанная демка, которую вы видите на этой страничке, заинтересовала - зайдите на сайт проекта , внимательно полистайте доки, попробуйте поработать с интерактивным демо на 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 можно тщательно повыбирать здесь, как видите, я указал линк на одну из понравившихся шкурок (скинов). Вот и все, ничего сложного... повторюсь, лентяи вполне могут оставить комментарии до лучших времен и просто поэкспериментировать с приведенным на форуме кодом, все будет работать буквально "из коробки".

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

 

2 комментарии

  • Aleksej

    написал Aleksej

    Пятница, 20 мая 2016 12:37

    Доброго дня; в вашем случае совсем уж полностью копипастить код не надо, зачем дважды подтягивать на страничку одни и те же скрипты? - вполне достаточно одного раза. А дальше - открываете Firefox, устанавливаете firebug и смотрите, что именно конфликтует.

  • Надежда

    написал Надежда

    Пятница, 20 мая 2016 08:11

    Добрый день! Большое спасибо за полезную статью.!
    Как можно реализовать использование двух MixItUp на одной странице? У меня они влияют друг на друга. Скопировала скрипт, изменив его название на mix2..., внутри изменила название div-ов на mix2, filter2, подключила к сайту - не помогло.

Оставить комментарий

Добавьте ваш комментарий