Back to Demos

This demo shows how you can switch zoom mode between slider and mouse scroll/pinch.

Max Zoom:

Min Zoom:

Clara.io demo resources:

Visit Base Scene


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 }
  );
}