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 в правильном текстовом редакторе (о выборе редактора я  тут писал), и увидите такие строки:

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

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

  • flat
  • flat_light
  • ultra_light
  • glass
  • 117

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

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

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

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

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

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

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

Подпись тура в браузере
Подпись тура в браузере

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

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

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

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

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

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

Ваш e-mail не будет опубликован.