Главная » Статьи » Pano2VR

Публикация на сайте проекта, созданного в Pano2VR

Как загрузить и опубликовать на своем сайте панораму или виртуальный тур, созданные в Pano2VR. Есть несколько способов. О них пойдет речь в этой статье.

1 5 4.2 276

Публикация на сайте проекта, созданного в Pano2VR

Изображение

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

Способ 1 – простая загрузка.

Рисунок 1. Открытие в браузере ссылки на html-файл.

Этот способ подойдет тем, кто не владеет достаточными знаниями HTML и CSS. Способ подразумевает собой загрузку на хостинг всего содержимого каталога «output» и открытие в браузере ссылки на html-файл, полученный в результате экспорта. При этом не важно, в какой формат был произведен экспорт панорамы или тура.

Способ 2 – тег «iframe».

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

Рисунок 2. Отображение панорамы на странице сайта во фрейме.

<iframe src="/panos_html5/gomel_i_love_gomel/panorama.html"
 width="600" height="380" align="center">
</iframe> 

Зависимости от формата экспорта панорамы или тура в этом способе нет. Весь необходимый код уже есть в html-файле. С помощью этого способа можно встроить панораму или тур на другом сайте.

Способ 3 – встраивание на страницу сайта.

Этот способ подойдет тем, кто владеет минимальными знаниями HTML, CSS и JavaScript. Для встраивания панорамного содержимого на сайт нужно воспользоваться исходным кодом из сгенерированного html-файла.

Панорама или тур были экспортированы в формат Flash

В результате экспорта в папке «output» будут следующие файлы и каталоги:

  • swf-файл панорамы, например, panorama.swf.
  • каталог «tiles» с тайлами мультирезолюшн, если они не были встроены в swf-файл.
  • swfobject.js – библиотека встраивания flash-содержимого.
  • html-файл, если при экспорте была включена опция «Подключить HTML-файл».

Для начала необходимо загрузить файл библиотеки swfobject.js на сервер, а затем в панели управления сайтом внести изменение шаблон страниц сайта. Оно заключается в подключении библиотеки swfobject.js в секции тега <head>.

<script type="text/javascript" 
src="/scripts/js/swfobject.js"></script>

При создании новой страницы остается добавить следующий код, который встроит панораму в страницу.

<script type="text/javascript">
<!--
 var flashvars = {};
 var params = {};
 params.quality = "high";
 params.bgcolor = "#ffffff";
 params.allowscriptaccess = "sameDomain";
 params.allowfullscreen = "true";
 params.base=".";
 var attributes = {};
 attributes.id = "pano";
 attributes.name = "pano";
 attributes.align = "middle";
 swfobject.embedSWF(
 "/pano/sphere/panorama1/panorama_1.swf", "flashContent", 
 "700", "500", 
 "9.0.0", "expressInstall.swf", 
 flashvars, params, attributes);
//-->
 </script>
 <div id="flashContent">
 <p><a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/
shared/download_buttons/get_flash_player.gif"
 alt="Get Adobe Flash player" /></a></p>
 </div>

У вас при экспорте код получится почти таким же. Отличие будет лишь в параметрах, передаваемых в функцию embedSWF(). Разберу некоторые из них.

  • /pano/sphere/panorama_1.swf – путь к swf-файлу панорамы;
  • flashContent – идентификатор div-блока, в который будет встроена панорама (конструкция блока приведена после закрывающего тега <script>);
  • 700 – значение ширины блока в пикселах (Для растягивания на весь экран нужно указать значение 100%);
  • 500 – значение высоты блока в пикселах.

Панорама или тур были экспортированы в формат HTML5

В результате экспорта в папке «output» будут следующие файлы и каталоги:

  • Каталог «tiles», содержащий изображения уровней (Если использовался экспорт в мультирезолюшн). В случае экспорта в один уровень, изображения уровня будут находиться в каталоге, имя которого задается в группе «Tile Settings» («Качество изображения»). По умолчанию «images»;
  • Каталог с изображениями, используемыми в оформлении (скине), если используется оформление. По умолчанию «images»;
  • pano2vr_player.js – JavaScript-файл проигрывателя панорамного содержимого;
  • skin.js – JavaScript-файл оформления. Файл будет присутствовать, если используется оформление;
  • xml-файл – файл с конфигурацией панорамы (например, panorama.xml);
  • html-файл – файл содержащий код встраивания. (например panorama.html).

При включенной опции «Flash Fallback file» дополнительно будут созданы файлы:

  • pano2vr_player.swf – flash-файл проигрывателя панорамного содержимого;
  • swfobject.js – библиотека встраивания flash-содержимого;
  • skin.xml – файл с конфигурацией оформления.

Код для встраивания HTML5-содержимого будет примерно следующим.

 <script type="text/javascript" src="/scripts/
js/pano2vr_player.js"></script>
 <script type="text/javascript" src="/pano/sphere/
panorama1/skin.js"></script>
 <div id="container" style="width:100%;height:100%;">
 This content requires HTML5/CSS3, WebGL, 
or Adobe Flash Player Version 9 or higher.
 </div>
 <script type="text/javascript">
 pano=new pano2vrPlayer("container");
 skin=new pano2vrSkin(pano);
 pano.readConfigUrl(
"/pano/sphere/panorama1/panorama_html5.xml");
 </script>
 <noscript>
 <p><b>Please enable Javascript!</b></p>
 </noscript>

Если получится так, что изображения в оформлении не отображаются, замените в файле skin.js пути к изображениям на абсолютные относительно доменного имени, например "/pano/sphere/panorama1/skin_images/button_up.png".

При включенной опции «Flash Fallback file» будет создан комбинированный код. Структура кода будет зависеть от опции опции «Prefer Flash if available», которая указывает обработчику скриптов на то, содержимое какого типа пытаться загрузить в первую очередь. Код будет иметь такую структуру.

 <script type="text/javascript" src="/scripts/js/
pano2vr_player.js"></script>
 <script type="text/javascript" src="/pano/sphere/
panorama1/skin.js"></script>
 <div id="container" style="width:100%;height:100%;">
 This content requires HTML5/CSS3, WebGL, or
Adobe Flash Player Version 9 or higher.
 </div>
 if (ggHasHtml5Css3D() || ggHasWebGL()) {
 pano=new pano2vrPlayer("container");
 skin=new pano2vrSkin(pano);
 pano.readConfigUrl("/pano/sphere/panorama1/panorama.xml");
 } else if (swfobject.hasFlashPlayerVersion("10.0.0")) {
 var flashvars = {};
 var params = {};
 // enable javascript interface
 flashvars.externalinterface="1";
 params.quality = "high";
 params.bgcolor = "#ffffff";
 params.allowscriptaccess = "sameDomain";
 params.allowfullscreen = "true";
 var attributes = {};
 attributes.id = "pano";
 attributes.name = "pano";
 attributes.align = "middle";
 flashvars.skinxml="/pano/sphere/panorama1/skin.xml";
 flashvars.panoxml="/pano/sphere/panorama1/panorama.xml";
 params.base=".";
 swfobject.embedSWF(
 "pano2vr_player.swf", "container", "100%", "100%",
 "9.0.0", "", flashvars, params, attributes);
 }
 </script>
 <noscript>
 <p><b>Please enable Javascript!</b></p>
 </noscript>

Способов размещения панорам и туров на своем сайте не много. Каждый по-своему прост или сложен. На этом я закончу статью. Все вопросы оставляйте в комментариях.

Pano2VR | Добавил: СЕРГЕЙ ДИШУК (29.09.2016)
1357 | Теги: сайт, Pano2VR, Хостинг, публикация, HTML5, загрузка на сайт, Панорама, flash
Рейтинг: 4.2 / 276 | Оцените материал:

Поделиться в социальных сетях:

Об авторе статьи:

Сергей Дишук, фотограф-любитель. Снимает пейзажи, животных, репортажи различных городских мероприятий. Увлекается программированием и разработкой программного обеспечения. Занимается съемкой панорам и созданием виртуальных туров более 5-ти лет. Имеет опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR, Autopano, Panotour.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Комментарии:

comments powered by HyperComments
Недавние панорамы

Список последних опубликованных сферических панорам

Рубрикатор
Случайная панорама
Опрос
Какие разделы сайта Вам интересны?
Всего ответов: 22
Я в социальных сетях
  1. Вконтакте
  2. Одноклассники
  3. Facebook
Последние комментарии
comments powered by HyperComments