addDot – jQuery plug-in for including Sizzling Spots
“addDot” plug-in can be utilized for including a scorching spot and present brief description about particular portion of a picture. Person may also add thumb picture within the description. Plug-in can be utilized in numerous industries like…
- Actual Property – Constructing Picture (Can present which ground has what facility)
- Automotive – Tow/4 Wheeler (Brief data about a part of automobile)
- Medical Area – Human Physique (Describing numerous merchandise that firm have for particular a part of human physique)
- Training – Human Anatomy
- Manufacturing unit Equipment – CNC Machines (Explaining which half does what when closing product is out)
There are lot extra industries the place you need to use “addDot” plug-in.
Plug-in Options
- Present on load choice
- Description with thumb picture
- Occasion kind choices (hover/click on)
- Customized animation pace
- Alter width & heigth choice
- Specify boundary padding
- Alter hotspots inside boundary
- Assign numeric, alphabet & roman values to scorching spots
Plug-in Customization Choices
| Porperty Identify | Knowledge Kind | Default Worth | Potential Worth | Description | ||||
|---|---|---|---|---|---|---|---|---|
| leftPos | integer | 0 | 200 | Place scorching spot on specified left place | ||||
| topPos | integer | 0 | 200 | Place scorching spot on specified high place | ||||
| label | string | ‘Label Textual content’ | ‘Sizzling 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, you must move 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 about to true scorching spot will likely be open on web page load | ||||
| eventType | string | ‘click on’ | ‘click on’ or ‘hover’ | Set occasion kind for decent 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. Whereas none will open/shut scorching spot with none impact. You’ll be able to set the animation pace by way of 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 is just not specified, it should alter width based mostly on scorching spot label textual content content material | ||||
| peak | integer | none | 100 | Set peak of scorching spot. (worth is in pixel) If peak is just not specified, it should alter peak based mostly on scorching spot label textual content content material | ||||
| boundaryPadding | integer | 0 | 10 | Set proper & backside padding if width or peak is just not specified. By setting contentPadding as 10 if width is just not specified, it should set width of scorching spot 10px lower than most allowed with (width of a picture container). If peak is just not specified, it should set peak of scorching spot 10px lower than most allowed peak (peak 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 person accomplish that it should alter to max allowed boundary – 150px | ||||
| btnLabel | string | none | ‘1’ or ‘a’ or ‘I’ | Set button label as a substitute of button icon. |
Change Log
Thanks all who had bought this plug-in & advised so as to add extra options into plug-in. Under 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 characteristic so as to add button label as a substitute of button icon. So person can add ("1, 2, 3...", "a, b, c...", "A, B, C...", "I, II, III...") as a substitute of open scorching spot icon.
v1.0.2 - fifth April 2012 Performance added to keep up z-index to keep away from overlapping of scorching spot labels.
v1.0.3 - twelfth April 2012 Added characteristic for open scorching spot label course. Person can specify scorching spot label open course as both "Left to Proper" or "Proper to Left" horizontally and "Up" or "Down" vertically.
v1.0.4 - 18th April 2012 Added characteristic for opening just one scorching spot label at a time, beforehand opened scorching spot will likely be conceal.
v1.0.5 - 2nd June 2012 Modified HTML tag of Label Textual content from <p> to <div> in order that person can add <h1> to <h6>, <ul> <ol> and so forth tags in label.
v1.0.6 - sixth June 2012 Mounted the bug when person has specified width & peak each. It was popping out of max allowed peak. Additionally scorching spot field width is now calculated based mostly on picture width/peak quite than container width/peak. If person needs it to set contaienr width/peak as max allowed width/peak simply write... this.dotBoxWidth = this.$dotBox.outerWidth(true); this.dotBoxHeight = this.$dotBox.outerHeight(true);
