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

В этой статье вы узнаете, как изменить различные настройки скина 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. Это нормально.