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.

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

Открытые превью
Открытые превью в 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"

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

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

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

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…»  и измените текст в кавычках на что-нибудь понятное. Например, «Загрузка…» А в одной из публикаций я расскажу, как сделать полоску загрузки. Но только если вы напишете, что это вам нужно, в комментариях.

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

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

 

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

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

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

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

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.