Как сделать интерактивную фотографию: Gigapixel
Популярный ресурс Storymap.knightlab.com, кроме, собственно, работы с картами, имеет еще одну функцию, которую стоит рассмотреть отдельно — это Gigapixel. Если в картах пользователь перемещается по некоторому географическому маршруту, следуя от одной отметки до другой, и просматривает привязанный к ним контент, то здесь в роли карты выступает изображение. Логика «маршрута» при этом остается прежней.
Таким образом, «Gigapixel» находится на пересечении возможностей «Storymap» от «Knight Lab» и «Thinglink». От последнего его отличает все-таки принцип движения, некоторой «экскурсии» по полотну.

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

После этого в окне настроек появятся дополнительные поля.

Для полноценной работы с «Gigapixel» понадобятся изображения в очень высоком разрешении. В самом деле — вы же хотите увеличивать отдельные их фрагменты для того, чтобы указывать на какие-то важные детали, тем более, добавлять к ним аннотации. Такие файлы могут быть очень большими, достигая по объему гигабайта. А теперь представьте, как в этом случае вы будете работать с подобным размером? И как и сколько по времени пользователь будет загружать иллюстрацию при открытии? Поэтому прежде чем приступить к разметке изображения, его потребуется разобрать на небольшие фрагменты, которые уже затем, в свою очередь, будут автоматически подгружаться при переходе к тому или иному его участку.
Для этого существуют специальные приложения и сервисы. «Storymap» отсылает нас к «Zoomify».
«Zoomify» — коммерческий продукт, однако для наших целей будет достаточно и его бесплатной версии — «Free Converter». Это приложение, которое потребуется установить на ПК, скачать его можно с сайта Zoomify. Доступны варианты загрузки для Windows и Mac, если у вас Linux, выберите первый вариант и установите его через Wine. После установки и запуска приложения нужно будет указать в памяти компьютера файл-изображение (то, которое нужно раздробить), и программа разложит его по отдельным файлам и папкам, они появятся в том же местоположении.
Но и это еще не все. «Storymap» не будет хранить эти данные на своих серверах, поэтому дальше нам понадобится загрузить их куда-то на ваш сайт, потому как, обратите внимание на подсказку в поле Zoomify URL, там указана следующая строчка: http://www.domain.org/directory.
Если у вас есть сайт — не страничка на блог-хостинге или в социальных сетях, а именно свой ресурс на отдельном хостинге, то сейчас остается только загрузить полученные файлы и папки на сервер, позаботившись о том, чтобы они были доступны для просмотра всем пользователям.
Если же нет, то не стоит отчаиваться в этот момент и забрасывать идею «гигапиксельного путешествия». Бесплатный хостинг появится у вас прямо сейчас, мы покажем, как и где его можно получить.
Впрочем, если вы хотите подойти к вопросу выбора хостинга серьезно и ответственно, прочитайте об этом наш специальный материал.

После того, как ваш аккаунт готов, осталось найти в разделе «Файлы» пункт для создания ftp-доступа, сделать его и закачать файлы на хостинг. Если вы специально не заводили отдельных папок под файлы для «Гигапикселя», значит искомый «Zoomify URL» — это просто ваш домен (адрес), который вы привязывали к хостингу.
Первым делом при работе с «Gigapixel» нужно задать правильное разрешение изображения — иначе оно может отображаться неверно. Настройки находятся в «Options» — «Max image size». Посмотрите на разрешение оригинальной картинки и задайте здесь соответствующую пропорцию — либо тот же размер.
В остальном принципиальных различий с работой в «Storymap» с картами и «Gigapixel» нет. Алгоритм остается тем же — только вам не нужно искать точку на карте через поиск. Просто добавляете контент — текст, иллюстрации — и передвигаете маркер для него в нужную точку изображения. Внимательнее отнеситесь здесь к масштабу — если необходимо, чтобы по клику на маркере пользователь увидел крупный план того или иного объекта, выставлять маркер на этом объекте нужно в том же масштабе (его можно менять кнопками «+» или «-»).
Инструкция актуальна на октябрь 2017 года.
Читайте также
Владимир Волкоморов
скриншоты