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

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

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

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

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

earth-500

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

earth-500-green

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

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

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

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

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

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

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

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

Вуаля!

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

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

Раздвигающееся вертикальное меню Drupal 6

Сентябрь 7, 2013 г.

Эта задача из разряда useability. Drupal может штатно создавать блоки вертикальных иерархических меню. Неудобным будет тот случай, когда мы хотим попасть на страницу в глубине иерархии этого меню. Нам придется последовательно заходить на родительские ...

Читать

Перебор атрибутов HTML элемента в javascript

Февраль 17, 2016 г.

За использованием библиотеки jQuery как то забываешь о базовых свойствах и методах DOM  в javascript. Как получить весь набор аттрибутов HTML элемента? Получим ссылку на элемент HTML документа каким либо образом: [crayon-58d45bac588a9745044620/] ...

Читать

 

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

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



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