jQuery Plugin To Create Editable Hotspots On Any Elements - Download jQuery Plugin To Create Editable Hotspots On Any Elements

Download jQuery Plugin To Create Editable Hotspots On Any Elements

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Editable Hotspots On Any Elements, hope it will help you in programming stack.

File Size: 136 KB
Views Total: 15137
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

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. View DEMO.
  • 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.

view source
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.

view source
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.

view source
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 // Object to hold the hotspot data points
02 data: [],
03  
04 // Element tag upon which hotspot is (to be) build
05 tag: 'img',
06  
07 // Specify mode in which the plugin is to be used
08 // admin: Allows to create hotspot from UI
09 // display: Display hotspots from data object
10 mode: 'display',
11  
12 // HTML5 LocalStorage variable where hotspot data points are (will be) stored
13 LS_Variable: '__HotspotPlugin_LocalStorage',
14  
15 // CSS class for hotspot data points
16 hotspotClass: 'HotspotPlugin_Hotspot',
17  
18 // CSS class which is added when hotspot is to hidden
19 hiddenClass: 'HotspotPlugin_Hotspot_Hidden',
20  
21 // Event on which the hotspot data point will show up
22 // allowed values: click, hover, none
23 interactivity: 'hover',
24  
25 // Action button CSS classes used in admin mode
26 save_Button_Class: 'HotspotPlugin_Save',
27 remove_Button_Class: 'HotspotPlugin_Remove',
28 send_Button_Class: 'HotspotPlugin_Send',
29  
30 // CSS class for hotspot data points that are yet to be saved
31 unsavedHotspotClass: 'HotspotPlugin_Hotspot_Unsaved',
32  
33 // CSS class for overlay used in admin mode
34 hotspotOverlayClass: 'HotspotPlugin_Overlay',
35  
36 // Enable ajax to read data directly from server
37 ajax: false,
38 ajaxOptions: { url: '' },
39  
40 // Hotspot schema
41 schema: [
42   {
43     'property': 'Title',
44     'default': 'jQuery Hotspot'
45   },
46   {
47     'property': 'Message',
48     'default': 'This jQuery Plugin lets you create hotspot to any HTML element. '
49   }
50 ]

Changelog:

v2.0.3 (2019-05-11)

  • Supports on browser resize events.

v2.0.3 (2018-10-09)

  • Fix image load issue in Firefox and Safari

2018-10-07

  • bug fix for responsive image.

2015-05-23

  • bug fix for ajax storing

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

source : jquery.net

Related posts: