This demo shows how you can switch zoom mode between slider and mouse scroll/pinch.
var api = claraplayer('player');
var sceneId = 'd7861e61-a55a-4d15-94fe-6d5c34c2d204';
var zoomModeControl = document.getElementById('zoom-mode-control');
var minZoom = document.getElementById('min-zoom');
var maxZoom = document.getElementById('max-zoom');
var isSliderEnable = false;
zoomModeControl.onclick = onChange( true);
minZoom.oninput = maxZoom.oninput = onChange( false);
api.sceneIO.fetchAndUse(sceneId);
document.getElementById('baseScene').setAttribute('href', 'https://clara.io/view/' + sceneId);
function onChange(changeMode) {
return function(ev) {
if (changeMode) {
isSliderEnable = !isSliderEnable;
zoomModeControl.innerHTML = isSliderEnable
? 'Disable Slider Mode'
: 'Enable Slider Mode';
}
var minZoomValue = Number(minZoom.value);
var maxZoomValue = Number(maxZoom.value);
updateSlider(minZoomValue, maxZoomValue, isSliderEnable);
};
}
function updateSlider(minZoom, maxZoom, isEnable) {
api.commands.setCommandOptions(
'zoom',
isEnable ? { slider: { minZoom, maxZoom } } : { slider: undefined }
);
}