Как добавить виртуальный тур на сайт?

Долго я не делал эту статью, поскольку наивно полагал, что всё тут и так очевидно. Но, как оказалось, да: всё очевидно, но совсем не так. В заметке я расскажу, как просто и тупо добавить ваш созданный в krpano тур на ваш же сайт.

1. Вам нужен сайт

Нет, вы можете, конечно, пользоваться всякими viewat.org, 360cities.net или хранить панорамы в Просмотре улиц от Google (как добавить панораму в Просмотр улиц). Я тоже когда-то пользовался 360cities и viewat, вот только прошло время, и все панорамы, вставленные на мой сайт с 360cities, перестали работать. А Viewat поступил ещё более гадко — просто заменил мои панорамы какими-то непонятными левыми. Где гарантия, что у вас не гавкнутся панорамы, размещённые в Google?

Поэтому вам и нужен свой сайт.

2. К сайту нужен доступ через FTP

Да, есть другие варианты, но я рассмотрю именно этот — самый простой и банальный. Кроме того, вы должны знать, в какой именно папке должны храниться файлы на вашем сервере. Ответить на этот вопрос поможет документация вашего хостинга или техподдержка. Например, в моём случае это папка httpdocs. Но ваша папка может называться htdocs, public_html, может содержать имя вашего сайта, да и вообще я понятия не имею, как она называется. Это ваша забота, разобраться с этим.

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

3. Создайте отдельную папку (каталог), где будете хранить свои туры

Я назвал её pano, но тут уж ваша воля выбирать имя. Однако, советую не делать длинных имён, отказаться от кириллицы и пробелов. Я вас предупреждал.

4. Открыв эту папку, загрузите туда целиком папку вашего тура

Хорошая примета — давать папкам с турами сразу осмысленные имена, без кириллицы, пробелов и дурацких сочетаний символов.

5. Теперь ваш тур будет открываться по адресу: 

http://вашсайт.ру/pano/test/tour.html

И да, этот адрес придётся писать в браузере ручками. Уже неплохо, но не очень красиво. Давайте сделаем адрес немного красивее.

6. Просто переименуйте tour.html в index.html

После такой процедуры ваш тур будет открываться по адресу http://вашсайт.ру/pano/test/ — что смотрится приятнее, согласитесь?

7. Встройте ваш тур на сайт

Самый простой (и верный) способ — просто поставить ссылку на тур. Например, можете разместить на странице сайта изображение тура и сделать с этого изображения ссылку на http://вашсайт.ру/pano/test/ — такой тур будет открываться на весь экран, будет нормально смотреться на мобильных и ПК.

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

<iframe src="http://вашсайт.ру/pano/test/" width="900" height="500">
    Что-нибудь, что увидит пользователь, если у него браузер 1980 года и на нем не работают фреймы
</iframe>

width — ширина окна в пикселях, не должна превышать ширину окна вашего браузера. height — высота в пикселях, не должна ломать дизайн сайта. Ширину также можно указать в процентах: width=»100%» — это позволит вашему туру занимать всю ширину страницы, и смотреться будет всё это более гладко.

Третий способ (правильный):

Откройте файл tour.html и перенесите всё что там есть в вашу страницу (стараясь её не сломать). Сделать это в каком-нибудь визуальном редакторе wordpress уже не получится, надо будет ковыряться в коде, работать с дочерними темами, шаблонами. Но именно такой способ позволит вам сохранить deeplinking (подробнее тут), ну и вообще является наиболее корректным. После первого, разумеется.