Вы создали виртуальный тур, добавили переходы, сделали подписи панорам, и теперь хотите немного «довести до ума» его внешний вид, чтобы он смотрелся подобающим образом для вашего сайта. Что ж, давайте сделаем это.
Прежде всего, почему я работаю с 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 и перейти к следующему уроку.
А пока что вот наша окончательная версия виртуального тура (кликабельно):
Напоминаю, что скачать тур для экспериментов вы можете здесь, а найти исходные файлы панорам для экспериментов можете здесь.
[widget id=»nav_menu-2″]
