jQuery Plugin To Create Editable Hotspots On Any Elements

jQuery Plugin To Create Editable Hotspots On Any Elements

Hotspot is a jQuery plugin used to generate hotspots (e.g. comments, image annotations, text notes) on any Html elements.

Features:

  • Display mode: Display hotspots like a tooltip. Can be triggered with hover or click.
  • Admin mode: Add/remove/edit your custom hotspots and save them in local storage.
  • Allows to handle hotspots via Ajax calls.
  • Callback events supported.

Basic Usage:

1. Include jQuery library together with jQuery hotspot's stylesheet & script in the document.

1<link rel="stylesheet" href="jquery.hotspot.css">
2<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
3<script src="jquery.hotspot.js"></script>
2. Wrap the image into a DIV element.
1<div id="image-hotspots">
2  <img src="images/1.jpg">
3</div>
3. Call the plugin on the DIV element and set custom data for the image hotspots.
1$("#image-hotspots").hotspot({
2  data: [
3    {"x":288,"y":190,"Title":"Title 1","Message":"Image annotation 1" },
4    {"x":143,"y":200,"Title":"Title 2","Message":"Image annotation 2" },
5    ...
6  ]
7});
4. Default settings and callbacks.
01// Data
02data: [],
03 
04// Hotspot Tag
05tag:'img',
06 
07// Mode of the plugin
08// Options: admin, display
09mode:'display',
10 
11// HTML5 LocalStorage variable
12LS_Variable:'__HotspotPlugin_LocalStorage',
13 
14// Hidden class for hiding the data
15hiddenClass:'hidden',
16 
17// Event on which the data will show up
18// Options: click, hover, none
19interactivity:'hover',
20 
21// Buttons' id (Used only in Admin mode)
22done_btnId: 'HotspotPlugin_Done',
23remove_btnId: 'HotspotPlugin_Remove',
24sync_btnId: 'HotspotPlugin_Server',
25 
26// Buttons class
27done_btnClass: 'btn btn-success HotspotPlugin_Done',
28remove_btnClass: 'btn btn-danger HotspotPlugin_Remove',
29sync_btnClass: 'btn btn-info HotspotPlugin_Server',
30 
31// Classes for Hotspots
32hotspotClass: 'HotspotPlugin_Hotspot',
33hotspotAuxClass: 'HotspotPlugin_inc',
34 
35// Overlay
36hotspotOverlayClass: 'HotspotPlugin_Overlay',
37 
38// Enable ajax
39ajax: false,
40 
41ajaxOptions: {
42  url: ''
43},
44 
45// No. of variables included in the spots
46dataStuff: [
47  {
48'property': 'Title',
49'default': 'jQuery Hotspot'
50  },
51  {
52'property': 'Message',
53'default': 'This jQuery Plugin lets you create hotspot to any HTML element. '
54  }
55]
Latest
Previous
Next Post »

Featured post

how to remove notification device hd capable lenovo vibe k5

what is lenovo hd capable device. your device is hd capable notification remove how to remove notification device hd capable le...