set the size (in px) of the marker side (is a square);
Files
Contents of the folder tagyourimages:
- tagyourimages
- jquery.tagyourimages.js - the development version of the plugin;
- jquery.tagyourimages.min.js - the production version of the plugin (lightest to load);
- tagyourimages.css - the css file
- images
- marker.png - the marker image.
- tooltip_arrow.png - the tooltip arrows.
How to use
Include the jQuery library 1.7+ between the tag <head></head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
Include jquery.tagyourimages.min.js and tagyourimages.css between the tag <head></head>.
<script src="tagyourimages/jquery.tagyourimages.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="tagyourimages/tagyourimages.css" />
Create an empty file and name it data-tag.js, then include it between the tag <head></head>
<script src="data-tag.js" type="text/javascript"></script>
This file will contain the tag structure in JSON format created by the Tag Tool.
A example of code produced:
// This is a example var dataTag = { "imageTag_1": [ { "cordinates": { "x": "0", "y": "0" }, "text": "text", "link": "http://www.link.com", "linkText": "link", "image": "http://www.yourdomain.com/image.jpg" } ] }
Associate the plugin to the images that you want to make interactive.
<script type="text/javascript"> $(function() { // All images that have the class 'tagyourimages-image' $('img.tagyourimages-image').tagyourimages({ data: dataTag // dataTag is the variable on data-tag.js that contains the tag structure }); }); </script>
Put the html code.
The data-tag attribute is essential for take the tags information from the JSON on the data-tag.js.
(The html code is produced by the Tag Tool)
<img data-tag="1" class="tagyourimages-image" src="image_1.jpg" /> <img data-tag="2" class="tagyourimages-image" src="image_2.jpg" /> <img data-tag="3" class="tagyourimages-image" src="image_3.jpg" /> <img data-tag="4" class="tagyourimages-image" src="image_4.jpg" /> <img data-tag="5" class="tagyourimages-image" src="image_5.jpg" />
Settings
<script type="text/javascript"> // EXAMPLE: $('img.tagyourimages-image').tagyourimages({ markerSize: 20, // default: 30 marginTooltip: 15, // default: 10 markerStartOpacity: 0, // default: 0.4 markerHide: true, // default: true speedShowTooltip: 150, // default: 210 zIndex: 200, // default: 200 data: dataTag }); </script>
set the tooltip margin (in px) from the marker;
set the initial marker opacity;
set true or false if you want or not that the markers are hidden (take the markerStartOpacity value) when the mouse is out from the image;
set the tooltip speed;
set the images z-index;
the variable that contains the tags information;
How to make your images interactive
- Create an html file following the instructions above;
- Open the Tag Tool inside the package downloaded from codecanyon, upload the images and start tagging;
- Get the Data Tag from the Tag Tool, copy the code and paste it into your data-tag.js;
- Get Html code from the Tag Tool, copy the code and put it into your html file;
- Associate the plugin to the images that you want make interactive;
- ENJOY IT!
ATTENTION
Images must be uploaded manually via FTP into your server.