Marzipano: Auto-Rotoation

1) Datei data.js öffnen

2) nach "autorotoate" suchen (im Dateiende

  "name": "Project Title",
 "settings": {
 "mouseViewMode": "drag",
 "autorotateEnabled": false,
 "fullscreenButton": false,
 "viewControlButtons": true
 }
 

• "autorotateEnabled": false, : Das Bild dreht, bis die Rotation deaktiviert wird.
• "autorotateEnabled": false, : Das Bild muss zum drehen manuell aktiviert werden.

Offene Frage:

Kann das Autorotate-Bedienelement auch ausgeblendet werden? In der index.js ist dazu folgende Code-Zeile:

 var autorotateToggleElement = document.querySelector('#autorotateToggle');

Weiterführend:

Das Icon der Schaltfläche ist in der index.html verlinkt

<a href="#" id="autorotateToggle">
 <img class="icon off" src="img/play.png">
 <img class="icon on" src="img/pause.png">
</a>

Das Design der Autorotate-Schaltfläche ist in der style.css hinterlegt

#autorotateToggle {
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 width: 40px;
 height: 40px;
 padding: 5px;
 background-color: rgb(0,192,243);
 background-color: rgba(0,192,243,1.0);
}

.mobile #autorotateToggle {
 width: 50px;
 height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
 right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
 right: 50px;
}

#autorotateToggle .icon {
 position: absolute;
 top: 5px;
 right: 5px;
 width: 30px;
 height: 30px;
}

.mobile #autorotateToggle .icon {
 top: 10px;
 right: 10px;
}

#autorotateToggle .icon.on {
 display: none;
}

#autorotateToggle .icon.off {
 display: block;
}

#autorotateToggle.enabled .icon.on {
 display: block;
}

#autorotateToggle.enabled .icon.off {
 display: none;
}