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:
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
.
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.
Start by clicking an annotation to select it. Then you can customize:
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!
Again, in the "Style" group of settings, click any of the icons to change the look of the annotation.
To change the background color of the tooltip, change the "Tint Color" setting.
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.
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.
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.
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
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.
All you need to do to export the widget is to click the "jQuery Code" tab and copy it. That's all!
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.
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