How to add intro image

  • Hi Guys,

    I am a new guy and now trying to ad a startscene to my 360 images but it`s not working for me I. I think becoulse I am not an expert on coding. but I tryed topics on this forum but i am doing someting wrong. this is what I am doing:

    <layer name="introimage"
    url="images/introimage.png"
    align="center"
    alpha="0"
    onloaded="tween(alpha,1.0);"
    onclick="hideintroimage();"
    />

    I added this after my skin settings in the xml.. but nothing is showing up when i try the panorama. I tripple checkt if the path to the url whas correct. Please help me out.
    Thanks :)  *smile* *smile*

    Einmal editiert, zuletzt von 112 (14. Oktober 2015 um 10:02) aus folgendem Grund: Anyone ..? :S

  • Hi 112, this is the xml taken from the examples folder

    <!--
    krpano
    - introimage example
    - show an image during loading and fades it out 2 seconds after loading was done
    - clicking on the image will remove it too
    -->

    <krpano>

    <!-- pano image -->
    <preview url="../../panos/p2/preview.jpg" />
    <image>
    <cube url="../../panos/p2/pano_%s.jpg" />
    </image>

    <!-- view settings -->
    <view hlookat="0" vlookat="0" fovtype="MFOV" fov="100" fovmin="60" fovmax="140" />

    <events name="panoevents"
    onloadcomplete="delayedcall(introimage, 4.0, if(layer[introimage], hideintroimage() ); ); set(events[panoevents].onloadcomplete,null);"
    onremovepano="stopdelayedcall(introimage);"
    />


    <layer name="introimage"
    url="introimage.png"
    align="center"
    onloaded="set(alpha,0); tween(alpha,1.0);"
    onclick="hideintroimage();"
    />

    <action name="hideintroimage">
    if(layer[introimage].enabled,
    set(layer[introimage].enabled,false);
    tween(layer[introimage].alpha, 0.0, 0.5, default, removelayer(introimage));
    );
    </action>

    </krpano>

  • Thanks for the reaction I did that but its just not working for some reason. As test I used the introimage.png from the demo on this site.

    Maybe somone can see what i am doing wrong :)  
    this is my code:

    <krpano version="1.19" title="Virtual Tour">

    <include url="skin/vtourskin.xml" />


    <!-- customize skin settings: maps, gyro, thumbnails, tooltips, layout, design, ... -->
    <skin_settings maps="false"
    maps_type="bing"
    maps_bing_api_key=""
    maps_zoombuttons="false"
    gyro="true"
    littleplanetintro="true"
    title="false"
    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"
    />

    <!--
    For an alternative skin design either change the <skin_settings> values
    from above or optionally include one of the predefined designs from below.
    Either by removing the 'xml-if-check' from the particular <include> element
    or by adding e.g. initvar:{design:'flat_light'} to the embedpano() call in
    the html file:
    -->
    <include url="skin/vtourskin_design_glass.xml" if="design === 'glass'" />
    <include url="skin/vtourskin_design_flat.xml" if="design === 'flat'" />
    <include url="skin/vtourskin_design_flat_light.xml" if="design === 'flat_light'" />
    <include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" />
    <include url="skin/vtourskin_design_117.xml" if="design === '117'" />


    <!-- startup action - load the first pano/scene -->
    <action name="startup" autorun="onstart">
    if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
    loadscene(get(startscene), null, MERGE);
    if(startactions !== null, startactions() );
    </action>


    <scene name="scene_bg_pano_l" title="bg pano_l" onstart="" thumburl="panos/bg_pano_l.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

    <preview url="panos/bg_pano_l.tiles/preview.jpg" />

    <image type="CUBE" multires="true" tilesize="512" stereo="true" stereolabels="l|r">>
    <level tiledimagewidth="3840" tiledimageheight="3840">
    <cube url="panos/bg_pano_%t.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="1792" tiledimageheight="1792">
    <cube url="panos/bg_pano_%t.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="1024" tiledimageheight="1024">
    <cube url="panos/bg_pano_%t.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="-97.913" atv="4.448" linkedscene="scene_eerst_etage_pano_l" />

    </scene>


    <scene name="scene_eerst_etage_pano_l" title="eerst etage pano_l" onstart="" thumburl="panos/eerst_etage_pano_l.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

    <preview url="panos/eerst_etage_pano_l.tiles/preview.jpg" />

    <image type="CUBE" multires="true" tilesize="512" stereo="true" stereolabels="l|r">>
    <level tiledimagewidth="3840" tiledimageheight="3840">
    <cube url="panos/eerst_etage_pano_%t.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="1792" tiledimageheight="1792">
    <cube url="panos/eerst_etage_pano_%t.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="1024" tiledimageheight="1024">
    <cube url="panos/eerst_etage_pano_%t.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="-163.518" atv="19.062" linkedscene="scene_bg_pano_l" />
    <hotspot name="spot2" style="skin_hotspotstyle" ath="-163.207" atv="-25.742" linkedscene="scene_zolder_pano_l" />

    </scene>


    <scene name="scene_zolder_pano_l" title="zolder pano_l" onstart="" thumburl="panos/zolder_pano_l.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

    <preview url="panos/zolder_pano_l.tiles/preview.jpg" />

    <image type="CUBE" multires="true" tilesize="512" stereo="true" stereolabels="l|r">>
    <level tiledimagewidth="3840" tiledimageheight="3840">
    <cube url="panos/zolder_pano_%t.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="1792" tiledimageheight="1792">
    <cube url="panos/zolder_pano_%t.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="1024" tiledimageheight="1024">
    <cube url="panos/zolder_pano_%t.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" style="skin_hotspotstyle" ath="145.283" atv="18.605" linkedscene="scene_eerst_etage_pano_l" />

    </scene>

    <events name="panoevents"
    onloadcomplete="delayedcall(introimage, 4.0, if(layer[introimage], hideintroimage() ); ); set(events[panoevents].onloadcomplete,null);"
    onremovepano="stopdelayedcall(introimage);"
    />


    <layer name="introimage"
    url="introimage.png"
    align="center"
    onloaded="set(alpha,0); tween(alpha,1.0);"
    onclick="hideintroimage();"
    />

    <action name="hideintroimage">
    if(layer[introimage].enabled,
    set(layer[introimage].enabled,false);
    tween(layer[introimage].alpha, 0.0, 0.5, default, removelayer(introimage));
    );
    </action>

    </krpano>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!