Installation

Top

Include the plugin's CSS file in your head tag:

Include the plugin's JS file after jQuery and before the closing body tag:

In order to include the plugin in your site you also need to paste the generated jQuery code from the Editor. Do this in a script tag on the bottom of the file, just before the closing body tag.

Note that you should call the plugin after you have included it and in a closure. This is how it would look like in context:

Using the Editor

Top

Loading an image in the editor

To load an image in the editor, open the folder /editor/img/ Delete the current replace_me.jpg image. Copy and Paste your image there, and rename it to replace_me.jpg.

Placing annotations on your image.

Start by opening /editor/index.html You should see the image that you pasted, and you can start drawing annotations. Please note that this is not the actual size that the image will appear in your site. You can specify the width and height of the widget, or to make it flexible.

There are two kinds of annotations:
- Spot - always 44x44 pixels in size and you can make it look like a pin for example with the built-in icons.
- Rectangle - custom size, can be visible or invisible.

To draw a spot, just click somewhere in the image. To draw a rectangle, click somewhere in the image and drag.

Customizing the annotations and the contents of the tooltip

Start by clicking an annotation to select it. Then you can customize:

- Whether the annotation is visible or invisible

In the "Style" group of settings, there are several styles to choose from, and the last one is "invisible". Click that if you wish the annotation to be hidden. It can still be triggered with the mouse!

- The icon/color of the annotation

Again, in the "Style" group of settings, click any of the icons to change the look of the annotation.

- The background and text color of the tooltip

To change the background color of the tooltip, change the "Tint Color" setting.

- Position and size of the tooltip

The tooltip can be positioned on the top, bottom, left or right side of the annotation. The setting for this is called "Popup position". You can also specify a size for the tooltip, if the "Auto" setting does not look good. Disable the "Auto" setting next to "Popup width" and "Popup height" and type the values that you choose.

- Add custom content to the tooltip

The tooltip can have two kinds of content. Built-in with just a title and a paragraph of text, or completely custom HTML. You can select that with the "Content Type" setting. Additionally, if you select "Text" type of content (the default), you can change the color of the text with the "Text Color" setting.

- Specify an ID for deep linking

If you wish to have a link on your site, which leads to a specific annotation on the widget, this is the URL that you need to use. You can choose to keep the default ID and just copy/paste the URL below, or change the ID if you want to. There is also an example of how to implement the deep linking functionality, just below the "Deep Linking" field.

Customizing the widget

On the right side you will see a "Navigation" tab of settings. This is where you specify the width/height of the widget, fullscreen support, and more.

The first two settings are most important - "Width" and "Height". If you check the "Auto" setting for "Width", then the widget will scale to 100% of the width of it's parent element. If you want the widget to be responsive, this is the way to do it.

The rest of the settings are self-explanatory:
- Max Zoom
- Navigator
- Navigator Image Preview
- Enable Fullscreen
- Enable Rubberbanding

Previewing the changes

To see how the widget looks, click the "Preview" button above the image. Note that if you have checked the "Auto" settings for width and height, it will scale to 100% the width of it's parent element.

Exporting to your site

All you need to do to export the widget is to click the "jQuery Code" tab and copy it. That's all!

Loading a widget to the editor to make changes

You can go back to the editor and make changes to a widget AFTER you have closed the editor. To do that, click the "Load" button above your image and paste the jQuery code that you copied from the editor earlier. Now click the blue "Load" button below the text field and it should load the widget without any errors.

Support

Top

To provide the best support possible, in December 2014 we launched a brand-new ticket support system for our customers! If you need help with any of our products, please click the button below to submit a ticket:

Submit Ticket