В этой статье вы узнаете, как изменить различные настройки скина krpano: сделать превьюшки открытыми или закрытыми по умолчанию, настроить их прокрутку, добавить логотип компании. Откройте ваш файл tour.xml и вглядитесь в его строки.
<krpano version="1.19" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<skin_settings maps="false"
maps_type="bing"
maps_bing_api_key=""
maps_zoombuttons="false"
gyro="true"
littleplanetintro="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth.normal="900"
layout_maxwidth.mobile=""
controlbar_width.normal="-44"
controlbar_width.mobile="100%"
controlbar_height.normal="38"
controlbar_height.mobile="34"
controlbar_offset.normal="22"
controlbar_offset.mobile="0"
controlbar_offset_closed="-40"
controlbar_overlap.normal="7"
controlbar_overlap.mobile="2"
design_skin_images="vtourskin.png"
design_bgcolor="0x000000"
design_bgalpha="0.5"
design_bgborder="0 0xFFFFFF 1.0"
design_bgroundedge.normal="9"
design_bgroundedge.mobile="1"
design_bgshadow="0 0 9 0xFFFFFF 0.5"
design_thumbborder_bgborder="4 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="5"
design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"
design_text_shadow="1"
/>
<!--Здесь будет еще много строк кода-->
</krpano>
Кстати, если вам нечего открывать, скачайте здесь виртуальный тур для экспериментов, или возьмите здесь мои панорамы, и экспериментируйте с ними.
Далее работать мы будем с этим фрагментом кода.
skin_settings — блок настроек, который содержит в себе множество переменных, которые krpano использует для настройки интерфейса, обращаясь к ним из различных сценариев. Вы можете редактировать значения этих переменных, но не вправе изменять их названия. Подробнее о переменных читайте в материале Переменные и константы в krpano.
Заголовок виртуального тура мы меняли в прошлой статье, поэтому возвращаться к нему не будем. Внесем изменения в другие элементы интерфейса. Так, первое, что лично мне хочется сделать — открыть панель превьюшек по умолчанию.
Открытие/закрытие панели превью по умолчанию
На мой взгляд, панель превью должна быть сразу открыта. Это дает зрителю представление о том, что по ним можно понажмать и пооткрывать. А это полезно. Далеко не все разберутся со стандартной иконкой открытия превью 
.
Найдите строку: thumbs_opened=»false» и измените ее на thumbs_opened=»true»
Все! Теперь ваши превью будут открыты сразу же после загрузки виртуального тура.
Полное скрытие панели превью
Если ваш виртуальный тур состоит всего из пары-тройки панорам, или если у вас есть какие-то еще соображения, превьюшки можно отключить полностью, чтобы они не отвлекали от просмотра панорамы и не занимали место на экране.
Найдите строки: thumbs=»true» и замените ее на thumbs=»false»
И все, панель с картинками скрыта.
Управление подписями
Если в вашем виртуальном туре много различных помещений, логично будет их подписать и сделать подписи видимыми. Как? Все очень просто. Подписали мы панорамы в прошлом уроке, а теперь включим подписи на превьюшках.
Найдите строку thumbs_text=»false» и замените значение константы thumbs_text на true: thumbs_text=»true»
Обновите страницу, и увидите, что на картинках появились подписи.
Аналогично можно включить/отключить отображение названия текущей панорамы над картинками: title=»true»
Кроме того, подписи с названиями панорам могут отображаться возле курсора мыши при наведении мыши на кнопки, превьюшки, хотспоты, и для этого тоже есть свои константы:
tooltips_buttons="false" tooltips_thumbs="false" tooltips_hotspots="false"
Лично я отдаю предпочтение подписям, которые видны постоянно, а не появляются при наведении мыши, т.к. постоянные подписи работают на всех устройствах, а появляющиеся при наведении — только на устройствах с мышью. При этом я избегаю дублирования подписей. Так, если включено отображение подписей на превью, то отображение их при наведении мыши выключено:
thumbs_text="true" tooltips_thumbs="false"
Изменение размеров превью
Если вы планируете демонстрировать ваш тур в небольшом окне, стандартный размер превью может показаться слишком большим. Не проблема, это можно исправить при помощи настроек скина. За размеры и кадрирование превью отвечают эти константы:
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_width=»120″ — ширина превью в пикселях
thumbs_height=»80″ — высота превью в пикселях
thumbs_padding =»10″ — отступ подписей внутри превью в пикселях
thumbs_crop=»0|40|240|160″ — кадрирование превью (подробнее о кадрировании в krpano, подробнее о настройках отображения превью в krpano)
Чтобы уменьшить превьюшки, просто измените значения ширины и высоты thumbs_width=»120″ и thumbs_height=»80″ на пропорциональные, например:
thumbs_width="90" thumbs_height="60"
Всё, теперь ваши картинки станут меньше. Только не забудьте о том, что нельзя менять соотношение сторон. А если всё же хотите сделать превью, например, квадратными, читайте материал об их расширенной настройке.
Изменение текста «Loading…»
Для русскоязычных зрителей логично будет поменять текст загрузки на что-нибудь более понятное, чем Loading…, и для этого в 1.19 также сделали константу. Просто найдите строку loadingtext=»loading…» и измените текст в кавычках на что-нибудь понятное. Например, «Загрузка…» А в одной из публикаций я расскажу, как сделать полоску загрузки. Но только если вы напишете, что это вам нужно, в комментариях.
Вот какой виртуальный тур получился у меня (нажмите, чтобы открыть):
Также читайте:
- Как сделать заставку «маленькая планета» в виртуальном туре krpano?
- Как сделать «открывающиеся» двери и активные хотспоты в виртуальном туре KRPANO?
- Как сделать виртуальный тур с планом этажа
Важное примечание
Некоторые элементы интерфейса отсутствуют в некоторых скинах. Все они имеются в скине 117, но практически ни один из них не работает в скине ultra_light. Это нормально.
