Star Zoom Quick Start Guide

It's really easy to use Star Zoom on your website. Just one line of JavaScript and no complex server setup.

Step 1: Create a Compatible Image

You need to convert your image into a form suitable for use with Star Zoom. Use the Star Zoom Atomiser tool to convert your images.

If you just want to experiment, you can use the test image supplied with the download package.

Step 2: Create a Web Page

Once your image has been converted, it's time to create a basic web page that allows you to zoom your image.

Here is an example that creates a single Star Zoom on the page:

<!DOCTYPE html>
        <title>Star Zoom Quick Start</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <!-- Include jQuery libary script. -->
        <script type="text/javascript" src=""></script>
        <!-- Include Star Zoom script. -->
        <script type="text/javascript" src="starzoom.js"></script>
        <!-- Call 'quickStart' function. -->
        <script type="text/javascript">StarZoom.quickStart();</script>

            /* CSS for the viewport. */
            #viewport {
                border:1px solid #ccc;

        <!-- Use CSS class 'starzoom' to indicate element is a viewport. -->
        <!-- Set the "image" property to tell Star Zoom where the image directory is. -->
        <div id="viewport" class="starzoom" data-starzoom = 'image: "image1_jpg"'></div>


Only the image property needs to be set to use Star Zoom. However, other properties are available to customise Star Zoom's behaviour.

Star Zoom properties are specified in the data-starzoom attribute. Enter the values as you would a normal JavaScript object, but without the opening and closing braces:

data-starzoom = '{image: "image1_jpg"}' // Wrong.
data-starzoom = 'image: "image1_jpg"'   // Correct.

Note: versions prior to 1.1 Rev 1406241305 required a strict JSON format with braces.

List of Properties

Property NameTypeDescriptionDefault Value
imagestringPath to a converted image directory.''
easeTimenumberMillisecond duration of easing. Increase this for a more floaty effect, decrease for snappier movement.500
resizablebooleanAllows the viewport to resize. Useful for fluid layouts and resizable windows. There is a minor performance overhead for resizable zooms, hence the option.false
zIndexnumberCSS z-index to be applied to viewport.0
minScalenumberThe minimum scale (relative to original image). Zero is a special case whereby the image will not become smaller than the viewport.0.000
maxScalenumberThe maximum allowable scale (relative to original image).1.000
mouseWheelbooleanWhether or not to use the mouse wheel.true
startPointarrayStar Zoom automatically scales and centres the image so it starts fully visible in the viewport. You can override this behaviour by specifying your own start point. The start point should contain three numbers that represent x, y and scale.[]
dashboardstringSelector to a dashboard in the page. A dashboard contains three buttons: zoom-in, zoom-out and reset. The dashboard will appear over the viewport and can be styled with CSS.''