jQuery Tagyourimages

Guidelines

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

Menu
  1. Files
  2. How to use
  3. Settings
  4. How to make your images interactive
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.