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.
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 |
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 | ] |
EmoticonEmoticon