Виджетик для сравнения двух картинок

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений можно придумать много : везде, где мы имеем две одинаковые картинки, одна из которых — «до», а вторая «после». Можно, конечно, просто выложить начальное и конечное изображение рядом. Но мне пришла в голову следующая идея (видимо, где то подсмотрел).

Мы наложим две картинки друг на друга и специальным разделителем как ширмой будем открывать то одну, то другую из картинок. Так они займут вдвое меньше места, а их сравнение будет более наглядным.

Виджета у меня пока нет, давайте его сварганим.

Для тестирования мне понадобилась картинка.

earth-500

И её обработанная версия, в которой я убрал красный цвет.

earth-500-green

Это могут быть любые картинки, важно, что они одинакового размера.

Я хочу, чтобы работало это так: я размещаю две картинки в каком то контейнере и передаю id этого контейнера некой функции, которая делает всю остальную работу, т.е. создаёт описанный выше виджет.  Т.е. работала html вида:

Осталось только написать код функции build_slider(id). :)

Понятно, что функцию я заранее написал и протестировал, потому я расскажу как она работает. Функция создает вместо двух картинок три контейнера : два с картинками и один служит специальным разделителем. Потом я подцепляю обработчики мыши так, чтобы разделитесь начал выполнять свою функцию.

Для разделителя я создаю вот такие стили:

Это будет тонкая вертикальная белая полоска. Курсор над ней будет принимать вид двойной стрелки — как будто для изменения размера по горизонтали.

А вот код функции:

Следование разделителя также прекращается за 10 пикселей от краёв картинки, чтобы не потерять разделитель из виду. Для временного хранения данных я использую атрибуты основного контейнера. Осталось только показать виджет в действии.

Вуаля!

earth-500
earth-500-green
Написать комментарий

Мало букафф? Читайте есчо !

Zoom-эффект на CSS3

Октябрь 21, 2015 г.

Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, ...

Читать

Улучшаем реакцию меню

Апрель 28, 2016 г.

Pull-down - выпадающим меню, работающим на javascript, никого не удивить. Мне не нравится, что оно закрывается мгновенно, как курсор мыши выходит за край выпавшей секции. Немного промахнешься (особенно это часто случается с последними пунктами), и меню ...

Читать

 

Комментарии к «Виджетик для сравнения двух картинок»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: