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.

jQuery Plugin To Create Editable Hotspots On Any Elements - Download jQuery Plugin To Create Editable Hotspots On Any Elements
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: