создание виртуального тура для сайта

В этой небольшой статье я расскажу как сделать 3д панораму и разместить ее на сайте на примере стоматологической клиники.

Первое что нам понадобится панорамное фото. Панорамная фотография – это фотография, склеенная из нескольких кадров, склейку можно сделать через автоматическую функцию в   Photoshop  или Adobe Lightroom , либо  в любой другой программе.

Должно получиться так:

 

Чтобы удобно просматривать широкоформатные изображения на сайте, потребуется

плагин для просмотра панорам

Самый популярный с множеством расширений и возможностей Krpano плагин, но отдавать 130 EUR за лицензию в данном случаии мне показалось нецелесообразным, поэтому решил поискать что нибудь по лучше.

Marzipano, — Простои и функциональный плагин , который в пару кликов поможет сделать виртуальный тур на сайте.

Для этого заходим в Marzipano Tool и загружаем панорамное фото, а также настраиваем дополнительные параметры:  кнопки навигации , место начала отображения виртуального тура и тд. После чего делаем экспорт и сохраняем архив.

как сделать виртуального тур на сайте

на хостинге где у вас находиться сайт, создаем папку pano и переносим туда файлы из архива. (переупаковываем экспортированный архив, так чтобы index.htm был в корне папки а не в app-files и распаковываем на сервере)

После чего  на сайте в том месте, где должна быть панорама прописываем следующий код

<iframe onload="iFrameHeight()" id="blockrandom" name=""src="http://site.ru/pano/index.html" width="100%" height="450" scrolling="auto" frame border="1" class="wrapper" > </iframe>

В ссылке «src=»http://site.ru/pano/index.html» указываем адрес вашего сайта.

Параметр height устанавливает высоту блока.

Готово!