Как сделать интерактивное сравнение двух фотографий на JQuery.
Всем привет! Сегодня я покажу, как можно сделать интерактивное сравнение с помощью простого JQuery плагина - TwentyTwenty.
Найти описание и примеры вы можете здесь. Там же вы можете скачать данный плагин, нажав соотвествующую кнопочку.
Теперь поговорим о том, как это все запустить. Для начала скачайте библиотеку JQuery и JQuery Event Movie, чтобы поддерживались мобильные устройства.
Теперь создадим контейнер с двумя фотографиями
<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>
Когда картинки будут загружены, вызываем плагин, передав ему название контейнера.
$(window).load(function() {
$("#container1").twentytwenty();
});
Или вы можете просто добавить нужный класс к контейнеру
<div id='container1' class='twentytwenty-container'>
<img src='sample-before.png'>
<img src='sample-after.png'>
</div>
У данного плагина есть один параметр - отступ слева.
default_offset_pct: 0.5
Как вы можете видеть выше, по умолчанию отступ от левого края равен половине, т.е. ползунок будет по середине. Но вы можете, конечно же, изменить данное значение на то, что вам нужно.
Итак, сегодня мы рассмотрели простой плагин для библиотеки JQuery - TwentyTwenty, который позволяет очень быстро сделать качественный эффект "До и После".
Спасибо за внимание и удачи!
-
Создано 23.09.2014 20:31:14
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.