HTML5 Tag Cloud Plugin With JavaScript & jQuery - TagCanvas

HTML5 Tag Cloud Plugin With JavaScript & jQuery - TagCanvas
File Size: 71.1 KB
Views Total: 8488
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

TagCanvas is a jQuery & Vanilla JavaScript Plugin for creating a HTML5 canvas based tag cloud with tons of customization options.

Features:

  • Smooth animations.
  • Plays a sound when entering a tag.
  • Draggable tags.
  • Pauses movement when interacting with tags.
  • Custom shapes.

How to use it:

1. Load the TagCanvas library in the document.

<!-- Vanilla JS Version -->
<script src="tagcanvas.min.js"></script>

<!-- jQuery Version -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.tagcanvas.min.js"></script>

2. Create an empty Canvas element for the tag cloud.

<canvas id="myCanvas">
  ...
</canvas>

3. Create a list of tag links as follows:

<div id="tags">
  <ul>
    <li><a href="#">Tag 1</a></li>
    <li><a href="#">Tag 2</a></li>
    <li><a href="#">Tag 3</a></li>
    ... more tags here
  </ul>
</div>

4. Initialize the plugin and render the tag cloud on the HTML5 canvas element you just created:

// Vanilla JS Version
TagCanvas.Start('myCanvas','tags',{
  // options here
});

// jQuery Version
$('#myCanvas').tagcanvas({
  // options here
}, 'tags')

5. Available plugin options to customize the tag cloud:

{
  z1: 20000,
  z2: 20000,
  z0: 0.0002,
  freezeActive: false,
  freezeDecel: false,
  activeCursor: 'pointer',
  pulsateTo: 1,
  pulsateTime: 3,
  reverse: false,
  depth: 0.5,
  maxSpeed: 0.05,
  minSpeed: 0,
  decel: 0.95,
  interval: 20,
  minBrightness: 0.1,
  maxBrightness: 1,
  outlineColour: '#ffff99',
  outlineThickness: 2,
  outlineOffset: 5,
  outlineMethod: 'outline', // 'classic', 'block', 'colour', 'size', 'none'
  outlineRadius: 0,
  textColour: '#ff99ff',
  textHeight: 15,
  textFont: 'Helvetica, Arial, sans-serif',
  shadow: '#000',
  shadowBlur: 0,
  shadowOffset: [0,0],
  initial: null,
  hideTags: true,
  zoom: 1,
  weight: false,
  weightMode: 'size', // 'colour', 'both', 'bgcolour', 'bgoutline', 'outline'
  weightFrom: null,
  weightSize: 1,
  weightSizeMin: null,
  weightSizeMax: null,
  weightGradient: {0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},
  txtOpt: true,
  txtScale: 2,
  frontSelect: false,
  wheelZoom: true,
  zoomMin: 0.3,
  zoomMax: 3,
  zoomStep: 0.05,
  shape: 'sphere', // 'vcylinder', 'hcylinder', 'hring', 'vring', ...
  // Limits rotation of the cloud using the mouse. 
  // A value of "x" limits rotation to the x-axis, "y" limits rotation to the y-axis. 
  // A value of "xy" will prevent the cloud rotating in response to the mouse - the cloud will only move if the initial option is used to give it a starting speed.
  lock: null,
  tooltip: null, // 'native' for operating system tooltips; 'div' for div-based.
  tooltipDelay: 300,
  tooltipClass: 'tctooltip',
  radiusX: 1,
  radiusY: 1,
  radiusZ: 1,
  stretchX: 1,
  stretchY: 1,
  offsetX: 0,
  offsetY: 0,
  shuffleTags: false,
  noSelect: false,
  noMouse: false,
  imageScale: 1,
  paused: false,
  dragControl: false,
  dragThreshold: 4,
  centreFunc: Nop,
  splitWidth: 0,
  animTiming: 'Smooth', // or 'Linear'
  clickToFront: false,
  fadeIn: 0,
  padding: 0,
  bgColour: null,
  bgRadius: 0,
  bgOutline: null,
  bgOutlineThickness: 0,
  outlineIncrease: 4,
  textAlign: 'centre', // 'left', 'right'
  textVAlign: 'middle', // 'top', 'bottom'
  imageMode: null, // 'image', 'text', 'both'
  imagePosition: null, // 'left', 'right', 'top', 'bottom'
  imagePadding: 2,
  imageAlign: 'centre', // 'left', 'right'
  imageVAlign: 'middle', // 'top', 'bottom'
  noTagsMessage: true,
  centreImage: null, // Uses a built-in centreFunc callback function to draw the image at full size in the middle of the canvas.
  pinchZoom: false,
  repeatTags: 0,
  minTags: 0,
  imageRadius: 0,
  scrollPause: false,
  outlineDash: 0,
  outlineDashSpace: 0,
  outlineDashSpeed: 1,
  activeAudio: '', // audio path
  audioVolume: 1,
  audioIcon: 1,
  audioIconSize: 20,
  audioIconThickness: 2,
  audioIconDark: 0,
  altImage: 0, //   Set to true to swap to the second image in the  element when the tag is active. }

6. API methods:

// pause the animation
TagCanvas.Pause(canvasId);
$(selector).tagcanvas("pause");

// resume the animation
TagCanvas.Resume(canvasId);
$(selector).tagcanvas("resume");

// reload the tags
TagCanvas.Reload(canvasId);
$(selector).tagcanvas("reload");

// update the tags
TagCanvas.Update(canvasId);
$(selector).tagcanvas("update");

// bring a tag to the front of the cloud
TagCanvas.TagToFront(canvasId, {
  id: "tag1",
  index: null, // Array index of tag to move to front
  text: null, // Text content of tag to move to front
  time: 500, // Duration of movement in milliseconds
  callback: null, // Function to call after movement has completed
  active: false, // If true, highlights the tag while it is in motion
});
$(selector).tagcanvas("tagtofront", {
  // TagToFront options here
});

// move a tag to another position
TagCanvas.RotateTag(canvasId{
  id: "tag1",
  index: null, // Array index of tag to move to front
  text: null, // Text content of tag to move to front
  time: 500, // Duration of movement in milliseconds
  callback: null, // Function to call after movement has completed
  active: false, // If true, highlights the tag while it is in motion
  lat: null, // Latitude of destination
  lng: null, // Longitude of destination
});
$(selector).tagcanvas("rotatetag", {
  // RotateTag options here
});

// set the cloud speed and direction
TagCanvas.SetSpeed(canvasId, [0.5, -0.25]);
$(selector).tagcanvas("setspeed", [0.5, -0.25]);

// remove the tag cloud
TagCanvas.Delete(canvasId);
$(selector).tagcanvas("delete");

Changelog:

v2.11.1 (2022-03-10)

  • Added alt image support, fixed audio icon displaying as dashed lines.

v2.9.0 (2016-03-02)

  • Update.

v2.5.0 (2014-07-04)

  • Update.

v2.4.0 (2014-05-28)

  • added tag background options.

v2.2.0 (2013-07-08)

  • Added TagToFront, RotateTag functions, clickToFront, animTiming and fadeIn options.


This awesome jQuery plugin is developed by goat1000. For more Advanced Usages, please check the demo page or visit the official website.