Device dependent display

Sometimes you may want different types of zoom depending on the screen dimensions available. For example, you may prefer to use FSI QuickZoom on desktop devices, but want to use FSI Viewer on mobile devices to give the user a satisfying zoom experience.

The following code snippet demonstrates how this can be achieved.

You can find the complete JS file in the tutorial resources on GitHub.

function initZoom() {
  var zoomDiv = document.getElementById('zoomImage');
  if ($FSI.isMobileDevice) {
    // any mobile device (Android/iOS/windows phone)
    var node = document.createElement('fsi-viewer');
    node.setAttribute('width', '600');
    node.setAttribute('height', '600');
    node.setAttribute('src', 'sample images/bags/80610_1.tif');
    zoomDiv.appendChild(node);
    $FSI.initCustomNode(node);
  } else {
    var image = document.createElement('img');
    image.setAttribute('width', '600');
    image.setAttribute(
      'src',
      '//example.com/fsi/server?type=image&source=sample%20images%2Fbags%2F80610_1.tif&height=600&format=jpeg',
    );
    zoomDiv.appendChild(image);
    FSIQuickZoom = new $FSI.QuickZoom({debug: true, useDevicePixelRatio: true});
    FSIQuickZoom.init();
  }
}

Here we create a fsi-viewer tag if the site is visited from a mobile device, or a normal image tag otherwise.

The tag created will be appended to a DIV which will contain the image or FSI Viewer JS somewhere in your HTML.

You can find a working example HTML file in the tutorial resources on GitHub.

<div id="zoomImage"></div>

Once the tag has been added, the FSI preferred zoom function will be enabled.

If you want to target touch devices in general, instead of checking for $FSI.isMobileDevice, you can also check for $FSI.isTouch.

This will also create an FSI Viewer JS on touch-enabled desktop monitors.