Image zoom

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>

If you only need Sirv JS for image zoom, you can use a smaller version of Sirv JS instead.

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:

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 = {
  viewer: {
    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" data-options="mode:magnifier">
  <div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom"></div> 
</div>

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      mode: 'magnifier'
    }
  }
}
</script>

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>

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

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" data-options="width:120%; height:150%">
<div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom"></div> 
</div>

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      width: '120%',
      height: '150%'
    }
  }
}
</script>

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" data-options="margin:20">
<div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom"></div> 
</div>

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      margin: 20
    }
  }
}
</script>

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" data-options="pan:true">
<div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom"></div> 
</div>

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      pan: true
    }
  }
}
</script>

Ratio

The zoomed image is 2.5 times larger than the main image by default. Increase or decrease the zoom level with ratio. For example, if the image on the page is 300px width and the zoom ratio is 3, then the first zoom will load a 900px width image, then the next level will be 2700px width and so on until the full size master image is shown. The zoom will not go beyond 100% of the master image (or it would start to look blurry).

This will make the zoomed image 4 times larger:

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

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      ratio: 4
    }
  }
}
</script>

Wheel

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

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

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      wheel: false
    }
  }
}
</script>

Tiles

Deep zooms use images that are sliced into many small square tiles. Only the tiles in the area where the user is zooming will load, so zooms load quickly, with minimal bandwidth. Tiling of deep zoom images cannot be disabled.

All other types of zooms (internal zoom, side zoom, magnifier) will load the large image, as this is typically the fastest experience. If you prefer to use tiles for those zooms, enable tiling by setting tiles to true:

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

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      tiles: true
    }
  }
}
</script>

Hint

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

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

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      hint: {
        enable: false
      }
    }
  }
}
</script>

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

• zoom.hint.text.hover: Hover to zoom
• zoom.hint.text.click: Click to zoom
• zoom.hint.text.dblclick: Double click to zoom

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

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      hint: {
        text: {
          dblclick: 'Double-cliquez pour agrandir'
        }
      }
    }
  }
}
</script>

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" data-options="map.enable:true">
<div data-src="https://demo.sirv.com/trainer.jpg" data-type="zoom"></div> 
</div>

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      map:{
        enable: true
      }
    }
  }
}
</script>

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

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

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      map: {
        size: 20
      }
    }
  }
}
</script>

Disable zoom

To disable zoom, remove data-type="zoom":

<div class="Sirv">
<div data-src="https://demo.sirv.com/trainer.jpg"></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>

Alt text

Alt text will automatically be added to the image based upon the image's Description field in your Sirv account.

Alternatively, alt tags can be added via the data-alt attribute, for example:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/example.jpg" data-type="zoom" data-alt="Write your alt tag here"></div>
</div>

Custom styling

You can use CSS to change the styling of the zoom experience, including the fullscreen icon or the mouse cursor.

Change cursor

To change the zoom-in cursor, upload a new SVG cursor to your account and reference it in a .smv-cursor-zoom-in style. Example:

<style>
.smv-cursor-zoom-in {
  cursor: url('https://demo.sirv.com/demo/sirv-media-viewer/zoom.svg'),
}
</style>

Change background color

To change the background behind a magnifier, change the .sirv-zoom class. This example will make the background 20% black:

<style>
.sirv-zoom {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>

Dynamic imaging

You can add parameters or a profile to the Sirv Zoom master image to create a unique design. Simply add a ? after the image name and & between each parameter. The example below uses a profile ?profile=Example-Text2:

Here is the code:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/trainer.jpg?profile=Example-Text2" data-type="zoom"></div>
</div>