jQuery Tagyourimages

Guidelines

Tagyourimages is a plugin for jQuery that lets you to make interactive your images.

Demo

See Html code

Files

Contents of the folder tagyourimages:

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>
- markerSize

set the size (in px) of the marker side (is a square);

- marginTooltip

set the tooltip margin (in px) from the marker;

- markerStartOpacity

set the initial marker opacity;

- markerHide

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;

- speedShowTooltip

set the tooltip speed;

- zIndex

set the images z-index;

- data

the variable that contains the tags information;

How to make your images interactive

  1. Create an html file following the instructions above;
  2. Open the Tag Tool inside the package downloaded from codecanyon, upload the images and start tagging;
  3. Get the Data Tag from the Tag Tool, copy the code and paste it into your data-tag.js;
  4. Get Html code from the Tag Tool, copy the code and put it into your html file;
  5. Associate the plugin to the images that you want make interactive;
  6. ENJOY IT!

ATTENTION

Images must be uploaded manually via FTP into your server.