With this tutorial you can create different interfaces for different devices in same Virtual Tour.

All you need is a software for edit code, I advise you to use Atom, it’s free and very powerful, but even what you usually use is fine, you’ll have to edit only a few lines of code.

  1. First create the virtual tour by exporting it with Panotour Pro
  2. After exported go to the project folder and change the name of the index_skin.xml file to index_skin_desktop.xml (note:  the name before _skin.xml depends on the name you have set in Panotour Pro under Filename in Output
  3. If use Atom, you can open folder project and edit filename and code.
  4. Go back to Panotour Pro, make the changes you want to see on Mobile or Tablet, the changes you can make are only the graphics, move icons, change size, etc. (does not work with hotspots, tour changes, Scenes, general settings, etc.)
  5. In this example, I used the Skinplus (but it also works with the other menu bars), I have put menu vertical right for mobile.
  6. Export the project with the changes.
  7. Go back to the project folder and you will find again index_skin.xml change the name to index_skin_mobile.xml (remember step number 2)
  8. Now edit the index.xml file, look for the line of code
    <include url = “%FIRSTXML%/index_skin.xml” />
  9. Change this line with this code

<include url = “%FIRSTXML%/index_skin_desktop.xml” devices = “desktop” />
<include url = “%FIRSTXML%/index_skin_mobile.xml” devices = “mobile|tablet” />

You can also decide to use the same desktop skin with a tablet then change the code with

<include url = “%FIRSTXML%/index_skin_desktop.xml” devices = “desktop|tablet” />
<include url = “%FIRSTXML%/index_skin_mobile.xml” devices = “mobile” />

Save and done you have 2 different skins



Beware, if you export the project with Panotour again all these changes will be deleted, and you will have to redo the whole procedure!

All devices supported by Krpano

Use only in the krpano Flash viewer.
Use only in the krpano HTML5 viewer.
Use only on desktop devices.
Use only on desktop and tablet devices.
Use only on tablet devices.
Use only on mobile devices.
Use only on mobile and tablet devices.
css3d Use only when CSS-3D-Transforms are available.
webgl Use only when WebGL is available.
multiressupport Use only when the browser is capable for multires.
panovideosupport Use only when the browser is capable for panoramic video.
fullscreensupport Use only when the Fullscreen mode is supported.
fractionalscaling Use only when a fractional page-scale or pixelratio is set.
mouse Use only on devices with mouse support.
touch Use only on devices with Multi-Touch support.
ios Use only on iOS devices (iPhone, iPod, iPad).
ios### Use only when the iOS version is equal or higher than ###.
Use only on the iPhone (and iPod Touch).
Use only on the iPod Touch.
Use only on the iPad.
android Use only on Android devices.
androidstock Use only in the old ‘stock’ (=WebKit-based) Android browser. Newer Android browsers are based on Chrome.
Use only in the Chrome browser
Use only in the Mobile Chrome browser (Android, Silk)
Use only in the Firefox browser.
Use only in the Internet Explorer browser.
Use only in the Microsoft Edge browser.
Use only in the Safari browser.
standalone Use only in the Standalone Flashplayer.
Use only on Windows systems.
Use only on Mac OSX systems.
Use only on Linux systems.