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

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

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

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

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

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

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

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

flat

light

ultralight

glass

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

Как менять стили в 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 и перейти к следующему уроку.

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

Виртуальный тур krpano
Виртуальный тур krpano

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

[widget id=»nav_menu-2″]

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.