Jet Zoom Quick Start Guide

It's really easy to use Jet Zoom on your website. Just include the scripts and CSS files and call the quickStart() function.

Example Web Page

Here is an example page that creates a single Jet Zoom with default options:

<!DOCTYPE html>


        <title>Jet Zoom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <!-- Include jQuery. -->
        <script type="text/javascript" src=""></script>
        <!-- Include Jet Zoom CSS. -->
        <link rel="stylesheet" type="text/css" href="jetzoom.css" />
        <!-- Include Jet Zoom script. -->
        <script type="text/javascript" src="jetzoom.js"></script>
        <!-- Call quick start function. -->
        <script type="text/javascript">

        <!-- Set the zoomImage property. -->
        <img class="jetzoom" src="images/small/image1.jpg"
             data-jetzoom = "zoomImage: 'images/large/image1.jpg'"/>



Various properties are available to change the look and feel of Jet Zoom.

JetZoom properties can be specified in the data-jetzoom attribute, example:

data-jetzoom = "zoomImage: '/mypath.jpg', useZoom: '#zoom1'"

Text values/strings should be surrounded by quotes e.g. useZoom: '#myZoom'. Numbers, true and false, should not e.g. lensAutoCircle: false

Note: Older versions of Jet Zoom (prior to 1.1 rev 1210181422) required the properties to be in strict JSON format. This will still work, but is now a deprecated.

List of Properties

Property NameTypeDescriptionDefault Value
zoomImagestringPath to the zoom image. If no zoom image is specified, the small image (as specifed in the image element) will be used.""
tintColorstringColor to use for the tint effect#fff
tintOpacitynumberOpacity of tint 0-1. If zero, no tint will be visible.0.25
fadeTimenumberDuration of fade effect in milliseconds750
lensClassstringCSS class to use for lens.jetzoom-lens
lensProportionsstringSpecify "width" to make the lens height the same as lens width. Specify "height" to make lens width same as height""
lensAutoCirclebooleanAutomatically turns lens into a perfect circle (diameter = width as defined in CSS)false
innerZoombooleanUse inner zoom mode.false