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>

<html>

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

        <!-- Include jQuery. -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></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">
              JetZoom.quickStart();
        </script>    

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

</html>

Properties

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 Name	Type	Description	Default Value
zoomImage	string	Path to the zoom image. If no zoom image is specified, the small image (as specifed in the image element) will be used.	""
tintColor	string	Color to use for the tint effect	#fff
tintOpacity	number	Opacity of tint 0-1. If zero, no tint will be visible.	0.25
fadeTime	number	Duration of fade effect in milliseconds	750
lensClass	string	CSS class to use for lens.	jetzoom-lens
lensProportions	string	Specify "width" to make the lens height the same as lens width. Specify "height" to make lens width same as height	""
lensAutoCircle	boolean	Automatically turns lens into a perfect circle (diameter = width as defined in CSS)	false
innerZoom	boolean	Use inner zoom mode.	false