Привет, друзья. Недавно занимался сайтом для стоматологической клиники и заказчик просил реализовать эффект было/стало и применить его к фото с челюстью. Я решил найти готовый плагин до/после, чтобы как можно быстрее реализовать эту задачу, а сейчас делюсь этим скриптом и его настройкой в блоге.

Извиняюсь за эту неприятную картинку, но это пример реального использования на сайте.
В общем мне понравилось 2 плагина:
Они полностью решали мою задачу и подходили по требованиям. К тому же, в обоих виджетах все в порядке с адаптивностью. Сначала я воспользовался плагином Cocoen, так как его можно использовать без jQuery. На сайте стояла древняя версия, и я боялся, что с ней виджет не заработает. Все было отлично, пока не пришлось добавить этот блок в слайдер, ведь заказчик захотел, чтобы можно было посмотреть несколько работ.
Тут и начались проблемы. Слайдер, который я использовал, поддерживал прокрутку касанием и перетягиванием мыши. Cocoen - тоже. Отключение этого эффекта у слайдера, приводило к неработоспособности и плагина до/после, а так как времени было мало, решил по-быстрому подключить TwentyTwenty, так как в нем реализована возможность переключения эффекта без клика, а просто движением мыши при попадании курсора в область плагина. На нем и остановимся.
Установка и настройка jQuery плагина с эффектом до/после - TwentyTwenty
Забегая вперед, покажу, какая у меня в итоге получилась структура проекта. Прикладываю ее для тех, кто не хочет скачивать исходник, а предпочитает копировать код и разметку из статьи.

Настройка плагина очень проста. Для начала давайте создадим в html такую структуру:
<div class="before-after"> <!-- Картинка "до" --> <img class="before-after__item" src="http://placehold.it/400x200&text=1" /> <!-- Картинка "после" --> <img class="before-after__item" src="http://placehold.it/400x200&text=2" /> </div>
Затем, после подключенного в ваш проект jQuery нужно добавить пути к скрипту и инициализировать его.
<!-- Скрипты --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="/js/jquery.twentytwenty.js"></script> <script src="/js/jquery.twentytwenty.js"></script> <script> $(function () { $(".before-after").twentytwenty(); }); </script>
Не забываем про таблицу стилей:
<link rel="stylesheet" href="/css/twentytwenty.css">
На этом основная настройка закончена, дальше идут только дополнительные возможности, которые я нашел полезными для себя. Во-первых, это возможность сделать как горизонтальное сравнение, так и вертикальное.

Делается это при помощи настройки "orientation". Вот так:
<script> $(function () { $(".before-after").twentytwenty({ orientation: 'vertical' }); }); </script>
По умолчанию, в плагине выводится вот такое описание секций.

Чтобы его отредактировать, нужно воспользоваться параметрами "before_label" и "after_label".
<script> $(function () { $(".before-after").twentytwenty({ before_label: 'Было', after_label: 'Стало', }); }); </script>
А для того, чтобы отключить эти подсказки, можно перевести в значение "true" параметр "no_overlay".
Самый важный для меня параметр, с которым удалось решить проблемы, описанные в начале статьи, это возможность не кликать для перетаскивания ползунка, а просто водить мышкой.
<script> $(function () { $(".before-after").twentytwenty({ move_slider_on_hover: true, }); }); </script>
На этом - все. Простой скрипт до/после, но он помогает нагляднее продемонстрировать результат вашей работы, показать "боль" или "страх" клиента и сразу же снять стресс, объяснив, что проблема решаема, вы с этим уже сталкивались и сможете качественно выполнить свою работу.
Кроме того, такая реализация портфолио или отзывов положительно влияет на конверсию и поведенческие факторы.
Исходник для плагина с эффектом до/после
Размер: 0,216
5 комментариев
Спасибо, Дмитрий, что делитесь с нами инструментами.
Спасибо!
Добрый вечер!
Выполнил установку плагина по вашей инструкции, но возникла проблема. Плагин отображается на странице только после изменения размера окна браузера в любую сторону. Не подскажите в чем может быть проблема?
Спасибо.
Сергей, нужно смотреть консоль браузера на предмет ошибок, пробовать подключать без других плагинов, смотреть не влияют ли они на работу плагина.
Дмитрий, спасибо. Творческая работа...