Image zoom

On this page

About

Sirv Media Viewer's zoom module is one of the easiest ways to showcase close-up details of your products. It's fast, highly customizable and can be combined with other modules like 360 spin, static images and videos.

Usage

1. Add sirv.js to your HTML page (usually before the </head> or before the </body>):

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

2. Add a div with class of "Sirv", containing each of your assets in their own div. This example contains 5 zoomable images:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/image1.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/image2.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/image3.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/image4.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/image5.jpg" data-type="zoom"></div>
</div>

Options

Customize your zoom with over 15 different options:

Parameter Default Options Description
mode inner inner, top, left, right, bottom, magnifier, deep Method for zooming an image.
trigger click click / dblclick / hover Method to trigger zoom.
margin 9 numeric (px) Padding between main image and zoomed image.
width auto auto / numeric (px) Width of image.
height auto auto / numeric (px) Height of image.
pan false true, false Pan the image on hover.
ratio 2.5 numeric Magnification level between each zoom.
wheel true true, false Zoom in/out on mousewheel.
tiles true true, false Zoom with small, 256px tiled images.
hint.enable true true, false Hint that image is zoomable.
hint.text.hover Hover to zoom Text shown if trigger is hover.
hint.text.click Click to zoom Text shown if trigger is click.
hint.text.dblclick Double click to zoom Text shown if trigger is double-click.
map.enable false true, false Display location map in corner.
map.size 25 Percentage Size of map in relation to main image.

How to apply options

Via data attributes

Zoom options can be applied with data-options either to all zooms via the master div, prefixed with zoom. for example zoom.mode:right:

<div class="Sirv" data-options="zoom.mode:right">
  <div data-src="https://demo.sirv.com/image1.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/image2.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/image3.jpg" data-type="zoom"></div>
</div>

Or apply options in each image div like so:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/image1.jpg" data-type="zoom" data-options="mode:right"></div>
  <div data-src="https://demo.sirv.com/image2.jpg" data-type="zoom" data-options="mode:right"></div>
  <div data-src="https://demo.sirv.com/image3.jpg" data-type="zoom" data-options="mode:right"></div>
</div>

Via JavaScript

Options can also be applied ot all spins on the page or website, via a script:

<script>
  var SirvOptions = {
    zoom: {
      mode: 'right',
      trigger: 'dblclick'
    }
  }
</script>

Mode

There are 4 zoom modes to choose from:

  • inner - zoom inside the main image.
  • top/right/bottom/left - zoom window to the side.
  • magnifier - magnifying loupe effect.
  • deep - multi-level deep zoom.
<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="mode:magnifier"></div>
</div>

Inner zoom

Magnifier zoom

Deep zoom

Hover zoom (right)

When using hover zoom (top/left/bottom/right), if there is insufficient space for the zoomed image, internal zoom will be used instead.

Trigger

Multi-level zoom can be zoomed on double-click (instead of click), by setting trigger to dblclick:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="mode:deep; trigger:dblclick"></div>
</div>

Width and height

Set the width and height of the zoom window in either px or as a percentage of the main image:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="width:120%; height:150%"></div>
</div>

Margin

Set the distance between the main image and the window on hover zoom with margin.

The default margin is 9px. This example sets it to 20px:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="margin:20"></div>
</div>

Pan

The image will pan as the cursor moves across it. Instead, you can enable click and drag to pan with pan:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="pan:true"></div>
</div>

Ratio

The zoomed image is 2.5 times larger than the main image by default. Increase or decrease the zoom level with ratio. This will make the zoomed image 4 times larger:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="ratio:4"></div>
</div>

Wheel

The mousewheel zooms the image by default. Turn it off by setting wheel to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="wheel:false"></div>
</div>

Tiles

The zoomed image will be sliced into many small square tiles and only the tiles around the place where the user is zooming will load. Instead, you can load the entire large image by setting tiles to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="tiles:false"></div>
</div>

Hint

Some text is shown over the image to hint to the user that the image is zoomable. To disable the hint, set hint.enable to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="hint.enable:false"></div>
</div>

Change the text to a message or language of your choice. There are 3 messages depending on the action required by the user:

  • hint.text.hover: Hover to zoom
  • hint.text.click: Click to zoom
  • hint.text.dblclick: Double click to zoom
<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="hint.text.dblclick: Double-cliquez pour agrandir"></div>
</div>

Map

A little map is shown in the corner to help users identify whereabouts they are in the zoomed image. This is useful for very large images. Enable it by setting map.enable to true:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="map.enable:true"></div>
</div>

The map size is 25% of the width of the image by default. Change it to another size with map.size:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom" data-options="map.size:20"></div>
</div>

Mobile settings

To set different settings for mobile devices, use SirvMobileOptions. It can be applied in three ways.

Either apply settings via the main div:

<div class="Sirv" data-mobile-options="zoom.ratio:1.5">
  <div data-src="https://demo.sirv.com/example.jpg" data-type="zoom"></div>
</div>

Or apply settings via each div:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/example.jpg" data-type="zoom" data-mobile-options="ratio:1.5"></div>
</div>

Alternatively, apply settings to all instances on a page/website via a script:

<script>
  var SirvMobileOptions = {
    zoom: {
      ratio: 1.5
    }
  }
</script>

Was this article helpful?

Get help from a Sirv expert