9 jQuery плагинов для сравнения изображений до и после
Прием, используемый в плагинах из этой подборки, очень эффектный и впечатляющий – перемещая специальный ползунок, пользователь одновременно может видеть два изображения и визуально оценить сходство или, наоборот, различия между ними. Применение ему можно найти в самых разных областях – дизайне, архитектуре, реставрации и различных исторических проектах – там, где между понятиями «до» и «после» лежит творческий процесс совершенствования существующих вещей.
TwentyTwenty
TwentyTwenty — отличный выбор для визуального сравнения двух фотографий «до» и «после»! Два изображения накладываются друг на друга и, используя CSS класс crop, производится обрезка левого, оставляя свободную область для правого изображения. Использует библиотеку jQuery и jquery.event.move для поддержки управления жестами.
jQuery Sequency
jQuery плагин, позволяющий визуально сравнивать два изображения «до» и «после» передвигая бегунок вверх-вниз.
Before-after.js
Автору удалось создать по-настоящему адаптивный слайдерсравнения изображений «до» и «после», к тому же достаточно простой. Создан на базе jQuery.
Juxtapose
JuxtaposeJS пригодится во многих случаях, когда необходимо выполнить сравнение и показать положение вещей «до» и «после». Это может быть застройка территории, загрязнение природы, сравнение зданий в историческом контексте и т.п. Работает на всех устройствах и очень прост в использовании — достаточно указать два изображения (кстати изображения могут находится на Flickr, Dropbox или Google Drive)
ImgSlider
Простой jQuery плагин, тем не менее отлично справляющийся со своей функцией. Нужно просто добавить соответствующие JS и CSS на страницу, поместить изображения в классы «left image» и «right image» и активировать плагин вызовом .slider()
Image Comparison Slider
Удобный в использовании плагин, позволяющий еще и добавлять подписи к сравниваемым фотографиям. Написан с использованием jQuery и CSS.
Cocoen
Cocoen поддерживает управление жестами, используя для этого библиотеку jQuery Touch Event. В остальном та же функциональность, учитывая, что на его создание автора вдохновил рассмотренный выше before-after.js
HTML5 Video Before and After Comparison Slider
Признаюсь честно, это первый увиденный мною плагин, который позволяет сравнивать не изображения, а видео! Для этого чуда требуется библиотека jQuery и совсем немного строк кода.
Double Viewer jQuery Plugin
Очень удобный в использовании плагин, работающий во всех популярных браузерах и на всех устройствах. Можно задать список из неограниченного числа пар фотографий, т.е. это обычный слайдер и «сравниватель» изображений в одном флаконе. Позволяет менять цвет разделительной линии и курсора, а также отображать на фото дополнительные надписи.Стоимость: $8
