9 jQuery плагинов для сравнения изображений до и после

jQuery плагины и JavaScript решения: 9 jQuery плагинов для сравнения изображений до и после

Прием, используемый в плагинах из этой подборки, очень эффектный и впечатляющий – перемещая специальный ползунок, пользователь одновременно может видеть два и визуально оценить сходство или, наоборот, различия между ними. Применение ему можно найти в самых разных областях – дизайне, архитектуре, реставрации и различных исторических проектах – там, где между понятиями «до» и «после» лежит творческий процесс совершенствования существующих вещей.

TwentyTwenty

TwentyTwenty — отличный выбор для визуального сравнения двух фотографий «до» и «после»! Два изображения накладываются друг на друга и, используя класс crop, производится обрезка левого, оставляя свободную область для правого изображения. Использует библиотеку и jquery.event.move для поддержки управления жестами.

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


jQuery Sequency

jQuery плагин, позволяющий визуально сравнивать два изображения «до» и «после» передвигая бегунок вверх-вниз.

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


Before-after.js

Автору удалось создать по-настоящему адаптивный слайдерсравнения изображений «до» и «после», к тому же достаточно простой. Создан на базе jQuery.

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


Juxtapose

JuxtaposeJS пригодится во многих случаях, когда необходимо выполнить сравнение и показать положение вещей «до» и «после». Это может быть застройка территории, загрязнение природы, сравнение зданий в историческом контексте и т.п. Работает на всех устройствах и очень прост в использовании — достаточно указать два изображения (кстати изображения могут находится на Flickr, Dropbox или Google Drive)

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


ImgSlider

Простой jQuery плагин, тем не менее отлично справляющийся со своей функцией. Нужно просто добавить соответствующие JS и CSS на страницу, поместить изображения в классы «left image» и «right image» и активировать плагин вызовом .slider()

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


Image Comparison Slider

Удобный в использовании плагин, позволяющий еще и добавлять подписи к сравниваемым фотографиям. Написан с использованием jQuery и CSS.

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


Cocoen

Cocoen поддерживает управление жестами, используя для этого библиотеку jQuery Touch Event. В остальном та же функциональность, учитывая, что на его создание автора вдохновил рассмотренный выше before-after.js

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


Video Before and After Comparison Slider

Признаюсь честно, это первый увиденный мною плагин, который позволяет сравнивать не изображения, а видео! Для этого чуда требуется библиотека jQuery и совсем немного строк кода.

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений


Double Viewer jQuery Plugin

Очень удобный в использовании плагин, работающий во всех популярных браузерах и на всех устройствах. Можно задать список из неограниченного числа пар фотографий, т.е. это обычный слайдер и «сравниватель» изображений в одном флаконе. Позволяет менять цвет разделительной линии и курсора, а также отображать на фото дополнительные надписи.

Стоимость: $8

jQuery плагины и JavaScript решения: 10 jQuery плагинов для визуального сравнения изображений
Напишите свой комментарий
comments powered by HyperComments