/ Сайтостроение / Адаптивность / Панорама на сайте

Панорама на сайте

Устанавливаем 3D панораму на сайте. Разбираемся в нюансах интеграции панорамы в шаблон сайта а также изучаем варианты реализации функционала. В данной статье будут накапливаться материалы по теме панорамы для сайта.

Панорама с Google Api

Панорама создана на технологии Google Api, т.е. сами панорамы уже сгенерированы и хранятся на серверах Google. Обычно подобные панорамы различных объектов ресторанов, отелей, клубов и пр. заведений делаются фирмами-партнерами Google.

Недавно получил панораму объекта, в набор которой входил файл index.html, скрипты, стили, шрифты и пара картинок. Если запустить index.html в браузере — ничего не будет происходить, но если залить все эти файлы на сервер — панорама работает.

Загрузив панораму на сервер и выведя ее на одной из страниц в iframe обнаружил, что панорама не работает. Исправил это внедрением стилей в саму страницу index.html, а стилям при этом изменил названия (т.е. получается ошибка 404). Что интересно, если вовсе убрать стили, то страница во фрейме снова перестает грузиться..

Другие панорамы

Другие панорамы также загружаются на сайт и запускаются только с сервера.

Особенности панорам

  • Внутри папки с панорамой содержатся изображения самой панорамы разбитые на сектора.
  • Если мы помещаем панораму в папку то при ссылке на эту папку исполняющий файл должен быть index.html, иначе будет 403 ошибка.
  • Чувствительность к регистру. Иногда, при загрузке на сервер, папка (лежащая рядом с исполняем файлом index) переименовывается в нижний регистр — надо проверять пути.
  • В мобильных устройствах панорамы работают с эффектами гироскопа, т.е. при изменении положения телефона панорама синхронно двигается.

Произвольное поле Panorama

Создаем дополнительное поле в виде строки. Далее выводим его в шаблоне:

<?php $panorama = get_post_meta($post->ID, 'panorama', 1);
if ( !empty($panorama) ): ?>
<h2>Виртуальный 3D-тур по номеру:</h2>
<iframe src="<?php echo $panorama; ?>" width="100%" height="400" frameborder="0"></iframe>
<?php endif; ?>

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Панорама на сайте
Подключаем КЛАДР
Рекомендации для васПодключаем КЛАДРOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.