7. Открытые превьюшки, прокрутка, текст загрузки и другие настройки

Продолжаем менять интерфейс в krpano

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

Кстати, если вам нечего открывать, скачайте здесь виртуальный тур для экспериментов, или возьмите здесь мои панорамы, и экспериментируйте с ними.

Далее работать мы будем с этим фрагментом кода.

skin_settings — блок настроек, который содержит в себе множество переменных, которые krpano использует для настройки интерфейса, обращаясь к ним из различных сценариев. Вы можете редактировать значения этих переменных, но не вправе изменять их названия. Подробнее о переменных читайте в материале Переменные и константы в krpano.

Заголовок виртуального тура мы меняли в прошлой статье, поэтому возвращаться к нему не будем. Внесем изменения в другие элементы интерфейса. Так, первое, что лично мне хочется сделать — открыть панель превьюшек по умолчанию.

Открытые превью
Открытые превью в krpano

Открытие/закрытие панели превью по умолчанию

На мой взгляд, панель превью должна быть сразу открыта. Это дает зрителю представление о том, что по ним можно понажмать и пооткрывать. А это полезно. Далеко не все разберутся со стандартной иконкой открытия превью Кнопка открытия превью.

Найдите строку:  thumbs_opened="false" и измените ее на  thumbs_opened="true"

Все! Теперь ваши превью будут открыты сразу же после загрузки виртуального тура.

Полное скрытие панели превью

Если ваш виртуальный тур состоит всего из пары-тройки панорам, или если у вас есть какие-то еще соображения, превьюшки можно отключить полностью, чтобы они не отвлекали от просмотра панорамы и не занимали место на экране.

Найдите строки:  thumbs="true"  и замените ее на  thumbs="false"

И все, панель с картинками скрыта.

Управление подписями

Если в вашем виртуальном туре много различных помещений, логично будет их подписать  и сделать подписи видимыми. Как? Все очень просто. Подписали мы панорамы в прошлом уроке, а теперь включим подписи на превьюшках.

Найдите строку thumbs_text="false"  и замените значение константы thumbs_text на true: thumbs_text="true"

Обновите страницу, и увидите, что на картинках появились подписи.

Аналогично можно включить/отключить отображение названия текущей панорамы над картинками: title="true"

Кроме того, подписи с названиями панорам могут отображаться возле курсора мыши при наведении мыши на кнопки, превьюшки, хотспоты, и для этого тоже есть свои константы:

Лично я отдаю предпочтение подписям, которые видны постоянно, а не появляются при наведении мыши, т.к. постоянные подписи работают на всех устройствах, а появляющиеся при наведении — только на устройствах с мышью. При этом я избегаю дублирования подписей. Так, если включено отображение подписей на превью, то отображение их при наведении мыши выключено:

Настройки скина krpano

Изменение размеров превью

Если вы планируете демонстрировать ваш тур в небольшом окне, стандартный размер превью может показаться слишком большим. Не проблема, это можно исправить при помощи настроек скина. За размеры и кадрирование превью отвечают эти константы:

thumbs_width="120" — ширина превью в пикселях

thumbs_height="80" — высота превью в пикселях

thumbs_padding ="10" — отступ подписей внутри превью в пикселях

thumbs_crop="0|40|240|160"  — кадрирование превью (подробнее о кадрировании в krpano, подробнее о настройках отображения превью в krpano)

 

Чтобы уменьшить превьюшки, просто измените значения ширины и высоты thumbs_width="120"  и thumbs_height="80"  на пропорциональные, например:

Всё, теперь ваши картинки станут меньше. Только не забудьте о том, что нельзя менять соотношение сторон. А если всё же хотите сделать превью, например, квадратными, читайте материал об их расширенной настройке.

Изменение текста «Loading…»

Для русскоязычных зрителей логично будет поменять текст загрузки на что-нибудь более понятное, чем Loading…, и для этого в 1.19 также сделали константу. Просто найдите строку loadingtext="loading..."  и измените текст в кавычках на что-нибудь понятное. Например, «Загрузка…» А в одной из публикаций я расскажу, как сделать полоску загрузки. Но только если вы напишете, что это вам нужно, в комментариях.

Вот какой виртуальный тур получился у меня (нажмите, чтобы открыть):

Виртуальный тур с отредактированным интерфейсом
Виртуальный тур с отредактированным интерфейсом

 

Также читайте:

Важное примечание

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

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

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

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