Устанавливаем 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; ?>
