Как показать читателю различия на двух фотографиях одного и того же объекта? Проще всего – поставить рядом два снимка, объяснить, что произошло, и пускай сам оценивает. Но есть и еще один интересный и красивый способ: соединить две картинки и с помощью ползунка буквально превращать одно изображение в другое.
Mediakritika.by протестировала несколько сервисов для такого превращения.
Вот у нас есть две чудесные фотографии въездной башни в Дукорской усадьбе, сделанных с одной и той же точки. Одну мы сделали в феврале 2004-го, вторую – совсем недавно, в октябре 2015-го. Изменения произошли колоссальные. Сейчас с этими изменениями и будем колдовать.
Итак, простейший способ показать изменения – поставить две картинки рядом, вот так:
А сейчас мы попробуем с помощью ползунков сделать картинку динамичной: двигаем ползунок влево-вправо и наглядно видим изменения «было - стало». Такой способ годится, например, чтобы показать изменения в архитектуре городов за разные годы, или чтобы сравнить два автомобиля одной и той же модели, но разных годов выпуска. Да что там – даже фото людей можно показывать: вот это, мол, я десять лет назад, а это сейчас.
JuxtaposeJS [3]
Этот сервис был разработан студентом Северо-Западного Университета в Чикаго Алексом Дунером. Исходники распространяются свободно [4] – любой может попробовать доработать его или внедрить на свой сайт. Он обладает немалым числом полезных настроек. Из неудобств – то, что сервис не хранит фото у себя на сервере. Соответственно, их нельзя загрузить с компьютера: нужно указать URL-адрес. Поэтому сначала «заливаем» снимки куда-нибудь на фотохостинг, а потом уже «скармливаем» сервису.
Сначала указываем две ссылки на картинки, потом возимся с опциями. Можно показывать на картинках подпись (например, дату или название) и пометить авторство. Важно следить, чтобы дата была проставлена под обоими снимками, иначе она не отобразится.
В правой части окна настроек задаем точку, где изначально будет находиться ползунок (по умолчанию – 50%, то есть, ровно посередине). Иногда полезно его немного сдвинуть в сторону: скажем, в нашем случае башня на снимке не находится строго по центру, так что ползунок можно сдвинуть на 4% влево. Поля «Dhow labels» и «Show credits» - это как раз даты и авторские права. Если поставить галочку в поле «Animate» - то при клике мышкой в произвольное место картинки ползунок переедет туда плавно (а если галочку не поставить – то просто «перепрыгнет»). Также можно установить ползунок так, чтобы он ездил не влево-вправо, а вверх-вниз, - для этого нужно поставить галочку в поле «Vertical». Отметим, что в предпросмотре этот вертикально елозящий ползунок двигаться почему-то не хотел.
После того, как настройки сделаны, жмем большую синюю кнопку «Publish» - и сервис выдает нам код в iframe для вставки на сайт.
Таких инструментов-слайдеров создано немало, но почти все они предполагают «возню» с кодом и тонкую настройку параметров посредством ручного ввода значений. А вот для «конечного пользователя», чтобы можно было легко испытать и применить, - такое найти сложно. Пожалуй, рассмотренный нами выше пример является чуть ли не единственным, который позволяет быстро выбрать и сравнить изображения и получить код для вставки на сайт. Нашлось еще одно решение, менее простое, - но, по крайней мере, любой человек, не обладающий опытом «кодинга», может сам посмотреть, что и как работает.
FlashXML [5]
Этот сервис, несмотря на большую сложность, обладает расширенным функционалом. Например, на картинке может быть сразу два ползунка, причем двигаться они могут автоматически. На вкладке «Edit Content» задаем картинки и очередность их появления, подписываем. Можно также указать ссылки для перехода после клика по картинке.
На вкладке «Edit Settings» задаем параметры: ширину и высоту картинки, размещение кнопок, автоматическое включение движения ползунка; тип, ширину и цвет ползунка; текст, фон, тени и многое другое.
После того, как все настройки завершены, жмем зеленую кнопку «DOWNLOAD image-before-after.zip». В результате мы получим не код для вставки на сайт, а архив с кучей разных файлов: изображения, иконки, таблицы стилей и проч. А на самом сайте есть инструкции для внедрения нашего изображения с ползунком на различные сайты. Базовый набор инструментов доступен бесплатно, а за деньги (от 12 до 64 евро) можно избавиться от логотипа сервиса и получить Flash-версию итоговой картинки.