Как сделать и встроить панорамную фотографию на 360 градусов на веб-страницу

Привет друзья. Покажу вам сегодня, как создать и вставить в блоге панорамную фотографию. 360-градусные панорамные фотографии - это функция, к которой многие мобильные телефоны могут получить доступ через соответствующие приложения. Веб-сайты в принципе не поддерживают такие фотографии и показывают, скажем так, только плоские фотографии.

панорамное фото на веб странице

Хочу показать как использовать внешнюю службу для публикации панорамной фотографии на веб-странице. Вы можете пока скопировать мой код, который приведён ниже, для просмотра результата. Вставьте его в этот редактор или у себя на тестовом блоге, если таковой есть. Настройки ширины и высоты рассмотрим ниже.

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

Вы попадёте по этой ссылке сразу на страницу, где нужно пройти регистрацию обычном способом. Здесь мы должны выбрать бета-версию FREE и внизу нажать на кнопку SIGN UP. Откроется окно с формой. Заполняете все поля - Введите имя, фамилию, адрес электронной почты, пароль, проверьте условия предоставления услуги.
Затем на указанную вами почту придёт письмо с успешной регистрацией и подтверждением.

У вас появился свой аккаунт и сразу можно приступить к работе. Выбираете пункт SHARED WITH ME. Кто работает с браузером Хром включите перевод. Вот такое окно, где соответственно выбираем Загрузить. Берем свою картинку с компьютера и загружаете.



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

панорамное фото на веб странице


Копируем эту ссылку. Она будет примерно такого вида

https://momento360.com/e/u/8c589472198c4f87a341ee0aefb42a44?utm_campaign=embed&utm_source=other&utm_medium=other&heading=0&pitch=0&field-of-view=75

Нам нужна только та часть, которую я отметила розовым цветом чтобы было вот так

<iframe height="350px" width="100%" allowfullscreen="true".
src="https://momento360.com/e/u/8c589472198c4f87a341ee0aefb42a44"> </iframe>


Два значения синего цвета ширина и высота фрейма могут быть настроены, так же как и полный экран ( false вместо true, если вы не хотите его предоставлять).

Таким образом будет автоматическое воспроизведение панорамной фотографии, с возможностью для читателя перемещаться по ней курсором.

Код нужно установить в редакторе сообщения или страницы в режиме HTML.

Красиво и стильно смотрятся такие панорамные фото. Попробуйте. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

9 комментариев:

  1. Спасибо, Виктория! Может пригодиться!

    ОтветитьУдалить
  2. Спасибо Викуся! Забрала,пригодится.

    ОтветитьУдалить
  3. Девчата, очень красиво смотрится природа, храмы, музеи. Забирайте.

    ОтветитьУдалить
  4. Выглядит интересно. Да именно природа и архитектурные сооружения хороши, наверное, в этом варианте. Спасибо, Вика.

    ОтветитьУдалить
    Ответы
    1. Люба, кто размещает такие фото, просто класс будет.

      Удалить
  5. Большое спасибо, учту на будущее )))

    ОтветитьУдалить
  6. Вика, всё может быть. А вдруг...

    ОтветитьУдалить
  7. Вика, как всегда - всё полезно! Не блог, а сплошной ликбез блоговедения, с кучей нужностей).

    ОтветитьУдалить
  8. Спасибо, Валерия. Делюсь знаниями.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск