Sirv Zoom documentation

This documentation explains how to embed image zoom in your websites/apps.

Zoom & Pan

Sirv Zoom lets you rapidly zoom into huge images. It works like Google Maps – click the image and it zooms in one level at a time. You can also use the mousewheel or double-tap on a touch device.

Demo with single image

Image zoom demo

By slicing your image into thousands of small image tiles, Sirv is able to zoom deep into images incredibly fast.

Images can be zoomed upon:

  • Single-click / double-click
  • Mousewheel
  • Double-tap (on touchscreens)

Demo with multiple images

Sirv Zoom can auto-generate thumbnails for other images, allowing you to swap between lots of images.

The example below has 3 zoomable images. Every image was created automatically by Sirv from the original large images that were uploaded:

Zoomable image 1
Zoomable image 2
Zoomable image 3

How to create a Zoom

Any image that you upload to Sirv is instantly ready to be zoomed.

Go to an image in your Sirv account and click the Sirv Zoom option. It’ll show you the embed code for your page.

1. Paste the code for the sirv.js file, before the </head> of your web page (or elsewhere on your page):

<script src=""></script>

2. Paste the code for your zoom image wherever you want it to appear on your page, using the <div> embed code shown in your account. It looks like this:

<div class="Sirv" data-effect="zoom" data-src=""></div>

Alternatively, you can embed a zoom using <figure>, for example:

<figure class="Sirv" data-effect="zoom" data-src=""></figure>

Instead of using the data-src attribute to specify the image source, you can use <img> as a nested tag, for example:

<figure class="Sirv" data-effect="zoom">
<img data-src="" />

Multiple zoom images can be configured in nested tags like so:

<figure class="Sirv" data-effect="zoom">
<img data-src=""/>
<img data-src=""/>
<img data-src=""/>
<img data-src=""/>

Another possible configuration is to place the main image in a ‘data-src’ attribute and additional images in nested tags:

<figure class="Sirv" data-effect="zoom" data-src="" >
<img data-src=""/>
<img data-src=""/>
<img data-src=""/>

Spacing, margin, padding and borders can be adjusted via CSS. For example, add a border to each thumbnail like so:

.sirv-zoom-thumbnails li {
border: 1px solid black;


Images look even more impressive in full-screen. To enter full-screen, click the button located in the top-right of the zoom. See below on how to customize buttons.

You may like to make full-screen the default user experience. Set the “fullscreen” parameter to “true” and when the user clicks anywhere on the image, full-screen will open, like so:

<div class="Sirv" data-options="fullscreen-only: true">

Full-screen image zoom demo

In the bottom right corner, a magnifier icon and “Enlarge” text is shown. That text can be changed or it can be removed by adding this CSS rule to your page:

.sirv-zoom-figure-view.fullscreen-only .sirv-zoom-button-fullscreen > span {
display: none !important;

Zoom options

Option Default Options Description
zoom-on-wheel true true / false Zoom In/Out on mouse wheel.
fullscreen true true / false Enable or disable the fullscreen view.
fullscreen-only false true / false Go immediately to full-screen on click.
retina true true / false Enable/disable retina images.
click-to-zoom 1 0 / 1 / 2 Number of clicks to zoom in (0 = disabled)
thumbnails bottom bottom / left / right / #id Thumbnail position (use #id to put them elsewhere).
thumbnails-orientation horizontal horizontal / vertical Thumbnail orientation, if positioned elsewhere with #id.
squareThumbnails true true / false Enable or disable square thumbnails.
contextmenu true / false true Enable/disable context menu (right-click).
textZoomIn Zoom In Context menu text for zoom-in.
textZoomOut Zoom Out Context menu text for zoom-out.
textEnterFullscreen Enter Full Screen Context menu text to enter fullscreen.
textExitFullscreen Exit Full Screen Context menu text to exit fullscreen.
textDownload Download Image Context menu text to download the image.

Options can be applied either individually or globally.

To apply options individually to a specific zoom, place your options inside the data-options attribute, for example:

<div class="Sirv" data-options="zoom-on-wheel:false; thumbnails:right">

To apply options globally to all your spins, place your options inside a script tag on your page, for example:

var SirvOptions = {
zoom: {
zoom-on-wheel: false

or use:

var SirvOptions = {};
SirvOptions.zoom = {
zoom-on-wheel: false


You can apply any of your Sirv profiles (a set of predefined settings) by using the data-profiles attribute in a zoom. In the example below, my-profile is the name of the profile being applied:

<div class="Sirv" data-effect="zoom" data-profiles="my-profile">

You can specify particular profiles for different screen-size devices. This is helpful for designing a website for mobiles, tablets and large desktop screens. To do this, add each profile, comma separated, with a w suffix and the pixel width of the maximum screen width that each profile is intended for. The profile without a descriptor is the default profile, for example:

<div class="Sirv" data-effect="zoom" data-profiles="car-zoom-small 767w, car-zoom-medium 959w, car-zoom-large 1279w, car-zoom-xlarge">


The height of horizontal thumbnails or width of vertical thumbnails can be changed via CSS, for example:

.sirv-zoom-thumbnails.thumbs-horizontal {
height: 90px;
.sirv-zoom-thumbnails.thumbs-vertical {
width: 90px;

Thumbnails can be styled in CSS, e.g.

.sirv-deepzoom-thumbnails li {
border: 1px solid black;

The active thumbnail can be highlighted with CSS, e.g.

.sirv-zoom-thumbnails li.sirv-thumb-selected {
border: 1px dashed red;


Change the background color of the enlarged full-screen image by updating the .sirv-zoom-figure.fullscreen-mode class.

This CSS will make the full-screen background and thumbnail background black:

.sirv-zoom-figure.fullscreen-mode .sirv-zoom-thumbnails {
background: #000;


Change the size of the buttons by using the .sirv-zoom-button CSS class to specify new sizes for width and height:

.sirv-zoom-button {
width: 20px;
height: 20px;
.sirv-zoom-nav-controls {
width: 22px;

Context Menu

The context menu is shown on right-click (Ctrl click on Mac). It looks like this:

Screenshot of right click in Sirv Zoom

The menu provides these options:

  • Zoom in
  • Zoom out
  • Enter Full Screen / Exit Full Screen
  • Download image

The design can be styled using CSS.

Menu box:

.sirv-contextmenu { }

Menu item:

.sirv-contextmenu li { }

Highlighted menu item:

.sirv-contextmenu li:hover { }

Disabled menu item:

.sirv-contextmenu li[disabled] { }

Line separator:

.sirv-contextmenu { }

Image quality

Your images will be served at the default Sirv settings (for JPEG, this is 85%).

To serve images slightly faster, you can reduce the quality of all the image tiles that make up a zoom. Simply add a quality value to the URI.

The code below sets a JPEG quality of 70%:

<div class="Sirv" data-effect="zoom">
<img data-src="//"/>

Here’s how 70% quality looks – you’ll notice more artefacts in the JPEG image, especially around areas of high contrast:

Image zoom demo

Start/stop zoom

Sirv Zoom will automatically initialize when the DOM is ready.

Alternatively, you can control this yourself with these commands:

  • Sirv.start() – starts all instances of .Sirv on the page.
  • Sirv.stop() – stops all instances of .Sirv on the page.

If you have multiple zooms on the page and need to control a particular one, specify the #id of that zoom:

  • Sirv.start(<#id>) – starts the .Sirv instance with a specific #id.
  • Sirv.stop(<#id>) – stops the .Sirv instance with a specific #id.

To turn off autostart on page load:

var SirvOptions = {
autostart: false

Browser compatibility

Sirv Zoom supports all modern browsers – Chrome, Safari, Firefox, Opera and Microsoft Edge. It is also backwards compatibile with many old browsers, including right back to Internet Explorer 8.

This strong browser support ensures your images will zoom on virtually every browser in use today.

Browser Compatibility
Chrome 6 and up Yes
Safari 6 and up Yes
Firefox 5 and up Yes
Opera 15 and up Yes
Microsoft Edge Yes
Internet Explorer 8 and up Yes

Expert support

For help from a Sirv expert, contact the support team from your Sirv account.

If you don’t have a Sirv account yet, join now.

Was this article helpful?

1 2 3 4 5