ОБ АВТОРЕ

Окончил факультет журналистики БГУ.

Работал в специализированных изданиях «Отдых и путешествия» и «Мобила», был штатным корреспондентом портала Open.by.

Внештатно сотрудничает с интернет-порталами TUT.by и CityDog.by, газетой «Аргументы и факты» и журналом «OnAir».

Автор и соавтор нескольких энциклопедий и путеводителей.

Активный блогер и краевед. 

Вы здесь

Добавь ползунок: интересный инструмент для сравнения фотографий

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

Mediakritika.by протестировала несколько сервисов для такого превращения.

Вот у нас есть две чудесные фотографии въездной башни в Дукорской усадьбе, сделанных с одной и той же точки. Одну мы сделали в феврале 2004-го, вторую – совсем недавно, в октябре 2015-го. Изменения произошли колоссальные. Сейчас с этими изменениями и будем колдовать.

Итак, простейший способ показать изменения – поставить две картинки рядом, вот так:

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

 

JuxtaposeJS

Этот сервис был разработан студентом Северо-Западного Университета в Чикаго Алексом Дунером. Исходники распространяются свободно – любой может попробовать доработать его или внедрить на свой сайт. Он обладает немалым числом полезных настроек. Из неудобств – то, что сервис не хранит фото у себя на сервере. Соответственно, их нельзя загрузить с компьютера: нужно указать URL-адрес. Поэтому сначала «заливаем» снимки куда-нибудь на фотохостинг, а потом уже «скармливаем» сервису.

Сначала указываем две ссылки на картинки, потом возимся с опциями. Можно показывать на картинках подпись (например, дату или название) и пометить авторство. Важно следить, чтобы дата была проставлена под обоими снимками, иначе она не отобразится.

В правой части окна настроек задаем точку, где изначально будет находиться ползунок (по умолчанию – 50%, то есть, ровно посередине). Иногда полезно его немного сдвинуть в сторону: скажем, в нашем случае башня на снимке не находится строго по центру, так что ползунок можно сдвинуть на 4% влево. Поля «Dhow labels» и «Show credits» - это как раз даты и авторские права. Если поставить галочку в поле «Animate» - то при клике мышкой в произвольное место картинки ползунок переедет туда плавно (а если галочку не поставить – то просто «перепрыгнет»). Также можно установить ползунок так, чтобы он ездил не влево-вправо, а вверх-вниз, - для этого нужно поставить галочку в поле «Vertical». Отметим, что в предпросмотре этот вертикально елозящий ползунок двигаться почему-то не хотел.

 

После того, как настройки сделаны, жмем большую синюю кнопку «Publish» - и сервис выдает нам код в iframe для вставки на сайт.

 

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

 

FlashXML 

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

На вкладке «Edit Settings» задаем параметры: ширину и высоту картинки, размещение кнопок, автоматическое включение движения ползунка; тип, ширину и цвет ползунка; текст, фон, тени и многое другое.

После того, как все настройки завершены, жмем зеленую кнопку «DOWNLOAD image-before-after.zip». В результате мы получим не код для вставки на сайт, а архив с кучей разных файлов: изображения, иконки, таблицы стилей и проч. А на самом сайте есть инструкции для внедрения нашего изображения с ползунком на различные сайты. Базовый набор инструментов доступен бесплатно, а за деньги (от 12 до 64 евро) можно избавиться от логотипа сервиса и получить Flash-версию итоговой картинки.

Оценить материал:
5
Средняя: 5 (1 оценка)
распечатать Обсудить в: