Как разместить панораму на своем сайте сделанную на iPhone 4s/5

Всего за 24 часа после выхода iOS6 на ней стали работать 15% всех устройств — сумасшедшая скорость обновления! А это значит, что все больше и больше iPhone 4s/5 смогут делать фотографии панорам! И тут же резонно возникает вопрос — а как этими панорамами правильно делиться в интернете, как их шарить? Мы расскажем вам про это :)

👌 В телеграм-канале «Лайфхакер» лучшие статьи о том, как сделать жизнь проще.

Делаем панорамы

Если вы не поняли как делать фотографию панорам, то нужно просто зайти в приложение Camera → нажать сверху Options → нажать Panorama. Затем нужно нажать кнопку съемки и просто провести телефоном — вы получите панораму 180˚ вокруг вас.

Размещаем панорамы в интернете

Вариант 1. Загрузите вашу панораму на Flickr/Dropbox/SkyDrive, скопируйте прямой URL на картинку и «скормите» его сервису zoom.it — сервис от Microsoft, который позволяет удобно просматривать фотографии высокого разрешения, а также, эмбедить на ваш сайт. Вьювер совместим с мобильными тач-устройствами. И самое главное — никакого флеша!
Демо.


Вариант 2. Можно опубликовать панораму в интерфейсе панорам Google Maps — API сервиса дает такие возможности! Тут находится полная инструкция, как это сделать — для фанатов Google :) Вариант 3. Вы можете размещать панорамы в вашем блоге или на сайте при помощи jQuery. Если вам кажется, что этот способ слишком технологичный и сложный для вас, то посмотрите на это демо для начала. Если вы хотите такой же код у себя на сайте, то просто разархивируйте этот файл и замените URL на свой. Ниже несколько JavaScript-овых вьюверов панорам.

  • Panorado JS – вьювер панорам на HTML5 с большим числом настроек. Бесплатный для персонального использования.
  • Cyclotron – Простой jQuery плагин для добавления панорам с горизонтальной промоткой, но без всяких контроллов.
  • TouchPanView – позволяет вставить любую большую картинку для просмотра при помощи мыши или пальцев на тач-устройствах. Работает на мобильниках и, даже, в IE.

Это упрощённая версия страницы.

Читать полную версию
Источник: www.labnol.org
Если нашли ошибку, выделите текст и нажмите Ctrl + Enter
Станьте первым, кто оставит комментарий