addDot – The jQuery Plug-in for Adding Hot Spots
addDot – jQuery plug-in for including Hot Spots
“addDot” plug-in can be utilized for including a scorching spot and present quick description about particular portion of a picture. User can even add thumb picture within the description. Plug-in can be utilized in numerous industries like…
- Real Estate – Building Image (Can present which ground has what facility)
- Automotive – Tow/Four Wheeler (Short data about a part of car)
- Medical Domain – Human Body (Describing numerous merchandise that firm have for particular a part of human physique)
- Education – Human Anatomy
- Factory Machinery – CNC Machines (Explaining which half does what when remaining product is out)
There are lot extra industries the place you need to use “addDot” plug-in.
Plug-in Features
- Show on load choice
- Description with thumb picture
- Event kind choices (hover/click on)
- Custom animation pace
- Adjust width & heigth choice
- Specify boundary padding
- Adjust hotspots inside boundary
- Assign numeric, alphabet & roman values to scorching spots
Plug-in Customization Options
| Porperty Name | Data Type | Default Value | Possible Value | Description | ||||
|---|---|---|---|---|---|---|---|---|
| leftPos | integer | 0 | 200 | Place scorching spot on specified left place | ||||
| topPos | integer | 0 | 200 | Place scorching spot on specified prime place | ||||
| label | string | ‘Label Text’ | ‘Hot spot label textual content’ | Label textual content that will likely be show inside scorching spot | ||||
| thumbImg | string | none | ‘img/thumb_img.gif’ | Add thumb picture on left aspect of label. For displaying thumb picture, it’s important to cross picture URL. (e.g. img/path/imgname.ext) | ||||
| showOnLoad | boolean | false | true or false | Set open/shut scorching spot label on web page load. If showOnLoad is ready to true scorching spot will likely be open on web page load | ||||
| occasionType | string | ‘click on’ | ‘click on’ or ‘hover’ | Set occasion kind for scorching spot open/shut impact | ||||
| aniType | aniType | ‘none’ | ‘slide’ or ‘none’ | There are two choices, by setting slide scorching spot will open/shut with slide impact. While none will open/shut scorching spot with none impact. You can set the animation pace through aniSpeed choice | ||||
| aniSpeed | integer | 1 | 2 or 0.75 | The length of the animation. (length is in seconds) | ||||
| width | integer | none | 100 | Set width of scorching spot. (worth is in pixel) If width just isn’t specified, it’s going to regulate width based mostly on scorching spot label textual content content material | ||||
| top | integer | none | 100 | Set top of scorching spot. (worth is in pixel) If top just isn’t specified, it’s going to regulate top based mostly on scorching spot label textual content content material | ||||
| boundaryPadding | integer | 0 | 10 | Set proper & backside padding if width or top just isn’t specified. By setting contentPadding as 10 if width just isn’t specified, it’s going to set width of scorching spot 10px lower than most allowed with (width of a picture container). If top just isn’t specified, it’s going to set top of scorching spot 10px lower than most allowed top (top of a picture container) | ||||
| withinBoundary | boolean | false | true or false | If true, it is not going to enable scorching spot place out of picture space boundary. If consumer accomplish that it’s going to regulate to max allowed boundary – 150px | ||||
| btnLabel | string | none | ‘1’ or ‘a’ or ‘I’ | Set button label as an alternative of button icon. |
Change Log
Thanks all who had bought this plug-in & instructed so as to add extra options into plug-in. Below are change log for plug-in options which weren’t included in first model of the plug-in.
v1.0.0 - twenty eighth March 2012 First launch
v1.0.1 - twenty eighth March 2012
Added function so as to add button label as an alternative of button icon. So consumer can add ("1, 2, 3...", "a, b, c...", "A, B, C...", "I, II, III...") as an alternative of open scorching spot icon.
v1.0.2 - fifth April 2012 Functionality added to take care of z-index to keep away from overlapping of scorching spot labels.
v1.0.3 - twelfth April 2012 Added function for open scorching spot label course. User can specify scorching spot label open course as both "Left to Right" or "Right to Left" horizontally and "Up" or "Down" vertically.
v1.0.4 - 18th April 2012 Added function for opening just one scorching spot label at a time, beforehand opened scorching spot will likely be conceal.
v1.0.5 - 2nd June 2012 Changed HTML tag of Label Text from <p> to <div> in order that consumer can add <h1> to <h6>, <ul> <ol> and so forth tags in label.
v1.0.6 - sixth June 2012 Fixed the bug when consumer has specified width & top each. It was popping out of max allowed top. Also scorching spot field width is now calculated based mostly on picture width/top somewhat than container width/top. If consumer needs it to set contaienr width/top as max allowed width/top simply write... this.dotBoxWidth = this.$dotBox.outerWidth(true); this.dotBoxHeight = this.$dotBox.outerHeight(true);
