PanoViewer

Document Embeded - Scroll

360

projection: EQUIRECTANGULAR

source: Veste Oberhaus

image:

Scroll this page by touch on a mobile device or by wheel-scroll on a PC

The page doesn't scroll when you focus on viewer area. But by clicking this . You can scroll the page although focused on viewer.

related option

  • touchDirection

If you want to disable touch recognition or apply only horizontal or vertical direction. You can use touchDirection option.

Constraint Touch Recognition to Selected Direction

You can set constraint for touch recognition by direction. You can choose between horizontal or vertical constraint. If you want to control only the camera's yaw angle by the gesture, you can use PanoViewer.TOUCH_DIRECTION.YAW as a value of touchDirection option.

Also you can use the setter method.

Disabling Touch Recognition

If you want to disable touch recognition, you can set the touchDirection option with PanoViewer.TOUCH_DIRECTION.NONE value at the constructor.

Or you can use the setter method.

Enabling Touch Recognition

Touch recognition is enabled by default. You can also define the option for enabling touch recognition explicitly to the constructor.

Or you can use the setter method.

// create PanoViewer with option
var restrict = false;
var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer");
var panoViewer = new PanoViewer(container, {
    image: "./veste.jpg",
    projectionType: "equirectangular"
});

document.getElementById("touchDirectionToggleButton").addEventListener("click", function() {
  if (restrict) {
    panoViewer.setTouchDirection(PanoViewer.TOUCH_DIRECTION.ALL);
    panoViewer.setUseZoom(true);
  } else {
    panoViewer.setTouchDirection(PanoViewer.TOUCH_DIRECTION.YAW);
    panoViewer.setUseZoom(false);
  }

  restrict = !restrict;
});