Прежде чем описывать процесс внедрения сферической панорамы или виртуального тура на сайт хочу немного рассказать о технологиях отображения такого рода контента.
На сегодняшний день существуют две наиболее популярные технологии: плагин Adobe Flash Player и HTML5 c WebGL. Стоит упомянуть, что сайтов, использующих технологию Adobe Flash, в интернете огромное количество, но, несмотря на это, она постепенно отмирает. В ближайшие годы производители браузеров планируют полностью от неё отказаться. К тому же, она не поддерживается мобильными устройствами, в частности — телефонами. HTML5 и WebGL напротив — набирает популярность.
Со своей стороны, я предоставляю своим заказчикам пакет файлов для размещения на сайте, который может поддерживать обе эти технологии. Причем, при правильной конфигурации кода на html странице и незначительном редактировании файлов JavaScript (в этом нет ничего сложного) — не потребуются никакие дополнительные модули или плагины.
Итак, Вы получите каталог с файлами:
- /images — каталог с изображениями кнопок управления;
- /tiles — каталог изображений панорамы;
- pano2vr_player.js — плеер, написанный на JavaScript;
- swfobject.js — плеер, для воспроизведения Adobe Flash, написанный на JavaScript;
- skin.js — библиотека функций для html5, написанная на JavaScript;
- pano.xml — описание элементов панорамы в формате xml
- pano-flash.swf — файл, содержащий панораму в формате Adobe Flash;
- pano-flash.html — образец веб-страницы, воспроизводящая панораму в формате Adobe Flash;
- pano-html5.html — образец веб-страницы, воспроизводящая панораму в HTML5+WebGL, если веб-браузер их не поддерживает - в формате Adobe Flash;
Эти файлы позволяют ознакомиться с полученным результатом работы просто открыв *.html файл в веб-браузере на компьютере. Но, чтобы встроить панораму в страницу на веб-сервере необходимо немного отредактировать HTML код.
Конкретный пример
Красным цветом отмечены необходимые правки. Оставлены только важные для понимания части.
Файл pano-html5.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Заголовок страницы</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="/путь/к-файлу/на-хостинге/swfobject.js">
</script>
</head>
<body>
<!-- - - - - - - 8<- - - - - - вырезать здесь - - - - - 8<- - - - - - - -->
<script type="text/javascript" src="/путь/к-файлу/на- хостинге/pano2vr_player.js"></script>
<script type="text/javascript" src="/путь/к-файлу/на-хостинге/skin.js"></script>
<!-- - Префикс нужен, чтобы не путать со стандартными названиями, используемыми различными фреймворками, например, Bootstrap - -->
<div id="префикс-container" style="width:100%;height:100%;overflow:hidden;">
<br>Loading...<br><br>
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 10 or higher.
</div>
<script type="text/javascript">
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// use HTML5 panorama
// create the panorama player with the container
pano=new pano2vrPlayer("префикс-container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
window.addEventListener("load", function(
{pano.readConfigUrlAsync("/путь/к-файлу/на-хостинге/pano.xml"); });
} else
if (swfobject.hasFlashPlayerVersion("10.0.0")) {
var flashvars = {};
var params = {};
// enable javascript interface
flashvars.externalinterface="1";
params.quality = "high";
params.bgcolor = "";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "flashpano";
attributes.name = "flashpano";
attributes.align = "middle";
swfobject.embedSWF("/путь/к-файлу/на-хостинге/pano-flash.swf", "префикс-container","100%", "100%","10.0.0", "", flashvars, params, attributes);
}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
<!-- - - - - - - 8<- - - - - - вырезать здесь - - - - - 8<- - - - - - - -->
<!-- Hack needed to hide the url bar on iOS 9, iPhone 5s -->
<div style="width:1px;height:1px;"></div>
</body>
</html>
Файл skin.js
Следующим шагом необходимо подредактировать файл skin.js. Блок для правки находится в самом начале файла.
function pano2vrSkin(player,base) {
var ggSkinVars = [];
var me=this;
var flag=false;
this.player=player;
this.player.skinObj=this;
this.divSkin=player.divSkin;
this.ggUserdata=me.player.userdata;
this.lastSize={ w: -1,h: -1 };
var basePath="/путь/к-каталогу/на-хостинге/";
// auto detect base path
if (base=='?') {
var scripts = document.getElementsByTagName('script');
for(var i=0;i<scripts.length;i++) {
var src=scripts[i].src;
if (src.indexOf('skin.js')>=0) { var p=src.lastIndexOf('/');
if (p>=0) {
basePath=src.substr(0,p+1);
}
}
}
} else
if (base) {
basePath=base;
}
Вот и всё. Не так сложно...