sorry.
I am attaching the code I am practicing.
thank you
https://krpano.com/examples/?layers => xml: responsive.xml
===========================================================================
<krpano version="1.22" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
maps_loadonfirstuse="true"
gyro="true"
gyro_keeplookingdirection="false"
webvr="true"
webvr_keeplookingdirection="true"
webvr_prev_next_hotspots="true"
autotour="false"
littleplanetintro="false"
followmousecontrol="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=""
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->
<layer
type="text"
text.desktop="[span style='font-size:20px;font-weight:bold;']Responsive Layers Examples[/span][br]Resize the Browser Window"
text.mobile.or.tablet="[span style='font-size:20px;font-weight:bold;']Responsive Layers Examples[/span][br]Rotate the Device"
css="color:white; text-align:center; font-size:14px; line-height:150%;"
txtshadow="0 1 2 0x000000 1.0"
align="top" y="100"
enabled="false"
bgalpha="0"
zorder="2"
/>
<layer
type="text"
template="Size: {{stagewidth}} x {{stageheight}}"
css="color:white; font-size:16px; font-weight:bold;"
txtshadow="0 1 2 0x000000 1.0"
align="center"
enabled="false"
bgalpha="0"
zorder="1"
/>
<!-- Example 1: Change the scale automatically depending on the window width in two steps. -->
<layer
url="krpano.svg"
align="right"
x="10" y="-160"
scale="link:stagewidth:stagewidth LT 700 ? 0.5 : 1.0"
/>
<!-- Example 2: Change the scale automatically depending on the window width in three steps. -->
<layer
url="krpano.svg"
align="right"
x="10" y="-80"
scale="link:stagewidth:stagewidth LT 500 ? 0.5 : (stagewidth LT 800 ? 0.7 : 1.0)"
/>
<!-- Example 3: Change the scale relative to the window width within given limits. -->
<layer
url="krpano.svg"
align="right"
x="10" y="0"
scale="link:stagewidth:clamp(stagewidth / 1000, 0.5, 2.0)"
/>
<!-- Example 4: Change the scale using the onresize event. -->
<layer
name="case4"
url="krpano.svg"
align="right"
x="10" y="+80"
scale="1.0"
/>
<events name="case4" keep="true" onresize="case4_onresize()" />
<action name="case4_onresize">
layer[case4].scale = stagewidth LT 600 ? 0.5 : 1.0;
</action>
<!-- Example 5: Change the scale animated using the onresize event. -->
<layer
name="case5"
url="krpano.svg"
align="right"
x="10" y="+160"
scale="1.0"
/>
<events name="case5" keep="true" onresize="case5_onresize()" />
<action name="case5_onresize">
tween(layer[case5].scale, (stagewidth LT 600 ? 0.5 : 1.0));
</action>
<!-- Example 6: Make elements visible depending on portrait or landscape mode. -->
<layer
type="text"
text="This element is only visible in landscape mode."
width="180"
css="color:white;"
padding="8"
bgcolor="0x00000"
bgalpha="0.5"
bgblur="5"
align="leftbottom" x="10" y="10"
visible="link:event.onresize:stagewidth GT stageheight"
/>
<layer
type="text"
text="This element is only visible in portrait mode."
width="180"
css="color:white;"
padding="8"
bgcolor="0x00000"
bgalpha="0.5"
bgblur="5"
align="lefttop" x="10" y="10"
visible="link:event.onresize:stagewidth LT stageheight"
/>
<!-- Example 7: Select three different layouts depending on the window width. -->
<layer name="case7_info"
type="text"
css="color:white;"
txtshadow="0 1 2 0x000000 1.0"
align="left" x="20"
enabled="false"
bgalpha="0"
zorder="2"
/>
<events name="case7" keep="true" onresize="case7_onresize()" />
<!-- Layout 1: <600, Layout 2: 600-1000, Layout 3: >1000 -->
<action name="case7_onresize" scope="private:CASE7">
newlayout = global.stagewidth LT 600 ? 1 : (global.stagewidth LT 1000 ? 2 : 3);
if(newlayout != oldlayout,
oldlayout = newlayout;
case7_setup_layout(get(newlayout));
);
</action>
<action name="case7_setup_layout" scope="local" args="layout">
if(layout == 1,
// do several layout settings here...
layer[case7_info].text = "Layout 1: Small";
,layout == 2,
// do several layout settings here...
layer[case7_info].text = "Layout 2: Middle";
,layout == 3,
// do several layout settings here...
layer[case7_info].text = "Layout 3: Large";
);
</action>
<scene name="scene_013" title="013" onstart="" thumburl="panos/013.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/013.tiles/preview.jpg" />
<image>
<cube url="panos/013.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2560" />
</image>
</scene>
<scene name="scene_014" title="014" onstart="" thumburl="panos/014.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/014.tiles/preview.jpg" />
<image>
<cube url="panos/014.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2560" />
</image>
</scene>
</krpano>
Display More