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.

view source

01

// Data

02

data: [],

03

04	// Hotspot Tag

05	tag:'img',

06

07	// Mode of the plugin

08	// Options: admin, display

09	mode:'display',

10

11	// HTML5 LocalStorage variable

12	LS_Variable:'__HotspotPlugin_LocalStorage',

13

14	// Hidden class for hiding the data

15	hiddenClass:'hidden',

16

17	// Event on which the data will show up

18	// Options: click, hover, none

19	interactivity:'hover',

20

21	// Buttons' id (Used only in Admin mode)

22	done_btnId: 'HotspotPlugin_Done',

23	remove_btnId: 'HotspotPlugin_Remove',

24	sync_btnId: 'HotspotPlugin_Server',

25

26	// Buttons class

27	done_btnClass: 'btn btn-success HotspotPlugin_Done',

28	remove_btnClass: 'btn btn-danger HotspotPlugin_Remove',

29	sync_btnClass: 'btn btn-info HotspotPlugin_Server',

30

31	// Classes for Hotspots

32	hotspotClass: 'HotspotPlugin_Hotspot',

33	hotspotAuxClass: 'HotspotPlugin_inc',

34

35	// Overlay

36	hotspotOverlayClass: 'HotspotPlugin_Overlay',

37

38	// Enable ajax

39	ajax: false,

40

41	ajaxOptions: {

42

url: ''

43

},

44

45	// No. of variables included in the spots

46	dataStuff: [

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

]