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>
<html>
    <head>
        <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="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <!-- Include Star Zoom script. -->
        <script type="text/javascript" src="starzoom.js"></script>
        <!-- Call 'quickStart' function. -->
        <script type="text/javascript">StarZoom.quickStart();</script>

        <style>
            /* CSS for the viewport. */
            #viewport {
                position:relative;
                width:512px;
                height:384px;
                border:1px solid #ccc;
            }
        </style>
    </head>

    <body>
        <!-- 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>
    </body>
</html>

Properties

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 Name	Type	Description	Default Value
image	string	Path to a converted image directory.	''
easeTime	number	Millisecond duration of easing. Increase this for a more floaty effect, decrease for snappier movement.	500
resizable	boolean	Allows the viewport to resize. Useful for fluid layouts and resizable windows. There is a minor performance overhead for resizable zooms, hence the option.	false
zIndex	number	CSS z-index to be applied to viewport.	0
minScale	number	The minimum scale (relative to original image). Zero is a special case whereby the image will not become smaller than the viewport.	0.000
maxScale	number	The maximum allowable scale (relative to original image).	1.000
mouseWheel	boolean	Whether or not to use the mouse wheel.	true
startPoint	array	Star 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.	[]
dashboard	string	Selector 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.	''