6. Редактирование интерфейса тура в krpano 1.19

Вы создали виртуальный тур, добавили переходы, сделали подписи панорам, и теперь хотите немного «довести до ума» его внешний вид, чтобы он смотрелся подобающим образом для вашего сайта. Что ж, давайте сделаем это.
Прежде всего, почему я работаю с krpano 1.19, которая пока ещё официально находится на стадии Beta тестирования? Потому что в этой версии движка добавлено очень много классных вещей, о которых мы с вами чуть ниже поговорим.

Преимущества krpano 1.19 перед предыдущими версиями очень ощутимы. Для меня, как для разработчика, важнее всего наличие некоторых «скрытых» преимуществ, но о них пока рановато. Зато самое время поговорить о том, что на виду.

Возможности krpano 1.19 и новее

Прежде всего, Клаус и компания добавили возможностей редактирования внешнего вида скина без глубокого копания в коде. Итак, главная новость это…

Возможность легко менять стили оформления тура

Действительно, взгляните на эти стили оформления панели krpano. Первый стиль — старый скин krpano версии 1.17. Четыре скина ниже — новые, и включаются они очень просто. Кстати, посмотреть, как каждый из них выглядит в реальности, вы можете, щелкнув по ним мышкой.

Архивная панорама сейчас недоступна

Это старый скин

Архивная панорама сейчас недоступна

Теперь отвлекитесь от монитора и немного разомните шею и плечи. Вы думаете, что дальше придётся долго вникать в сотни строк страшного кода? Ошибаетесь. Просто разомнитесь, это всегда полезно.

Как менять стили в krpano 1.19

Откройте ваш файл tour.html в правильном текстовом редакторе (о выборе редактора я тут писал), и увидите такие строки:

<!DOCTYPE html>
<html>
<head>
<title>krpano - 10</title>
<!--тут несколько строк кода-->
</head>
<body>

<script src="tour.js"></script>

<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<script>
		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"prefer", initvars:{design:"flat"}, passQueryParameters:true});
	</script>
</div>

</body>
</html>

Из всего этого кода нас сейчас интересует только один параметр:

initvars:{design:"flat"}

Именно он отвечает за оформление вашего виртуального тура. Просто поменяйте его на одно из значений:

flat
flat_light
ultra_light
glass
117

Затем сохраните файл и откройте его в браузере. Вы увидите, что оформление тура стало другим. Например, мне нравится вариант glass, и я выберу именно его:

initvars:{design:"glass"}

Теперь мой тур выглядит такАрхивная панорама сейчас недоступна.

Также в файле tour.html полезно будет проделать ещё одну штуку, а именно поменять подпись страницы.

Подпись страницы в krpano

Посмотрите в верхнюю часть документа и найдите строки:

<title>krpano - 10</title>

Согласитесь, этот заголовок не отражает суть того, что отражено в вашем блистательном туре? Поменяйте krpano — 10 на что-нибудь более понятное, например:

<title>Уроки по krpano</title>

Возможно, вы спросите, для чего это нужно. И я отвечу. Согласитесь, приятнее видеть в браузере понятное человекоподобное название, а не «krpano — 10»

Само по себе это уже неплохо, но вам может захотеться внести ещё несколько корректировок. Например, сделать, чтобы превьюшки были по умолчанию открыты, а на них были видны подписи. И здесь вам придётся отложить файл tour.html и перейти к следующему уроку.

А пока что вот наша окончательная версия виртуального тура (кликабельно):

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