addDot – jQuery plug-in for including Sizzling Spots
“addDot” plug-in can be utilized for including a scorching spot and present quick description about particular portion of a picture. Consumer can even add thumb picture within the description. Plug-in can be utilized in numerous industries like…
- Actual Property – Constructing Picture (Can present which flooring 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)
- Schooling – Human Anatomy
- Manufacturing facility Equipment – CNC Machines (Explaining which half does what when ultimate product is out)
There are lot extra industries the place you should use “addDot” plug-in.
- Present on load possibility
- Description with thumb picture
- Occasion sort choices (hover/click on)
- Customized animation pace
- Modify width & heigth possibility
- Specify boundary padding
- Modify hotspots inside boundary
- Assign numeric, alphabet & roman values to scorching spots
Plug-in Customization Choices
|Porperty Title||Knowledge Sort||Default Worth||Attainable Worth||Description|
|leftPos||integer||zero||200||Place scorching spot on specified left place|
|topPos||integer||zero||200||Place scorching spot on specified prime place|
|label||string||‘Label Textual content’||‘Sizzling spot label textual content’||Label textual content that shall be show inside scorching spot|
|thumbImg||string||none||‘img/thumb_img.gif’||Add thumb picture on left facet of label. For displaying thumb picture, it’s a must to go 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 shall be open on web page load|
|eventType||string||‘click on’||‘click on’ or ‘hover’||Set occasion sort for warm 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 possibility|
|aniSpeed||integer||1||2 or zero.75||The period of the animation. (period is in seconds)|
|width||integer||none||100||Set width of scorching spot. (worth is in pixel) If width just isn’t specified, it would modify width primarily based 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 would modify top primarily based on scorching spot label textual content content material|
|boundaryPadding||integer||zero||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 would set width of scorching spot 10px lower than most allowed with (width of a picture container). If top just isn’t specified, it would 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 person accomplish that it would modify to max allowed boundary – 150px|
|btnLabel||string||none||‘1’ or ‘a’ or ‘I’||Set button label as an alternative of button icon.|
Thanks all who had bought this plug-in & instructed 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.zero.zero - 28th March 2012 First launch
v1.zero.1 - 28th March 2012 Added characteristic so as to add button label as an alternative of button icon. So person can add ("1, 2, three...", "a, b, c...", "A, B, C...", "I, II, III...") as an alternative of open scorching spot icon.
v1.zero.2 - fifth April 2012 Performance added to take care of z-index to keep away from overlapping of scorching spot labels.
v1.zero.three - 12th April 2012 Added characteristic for open scorching spot label path. Consumer can specify scorching spot label open path as both "Left to Proper" or "Proper to Left" horizontally and "Up" or "Down" vertically.
v1.zero.four - 18th April 2012 Added characteristic for opening just one scorching spot label at a time, beforehand opened scorching spot shall be conceal.
v1.zero.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 many others tags in label.
v1.zero.6 - sixth June 2012 Mounted the bug when person has specified width & top each. It was popping out of max allowed top. Additionally scorching spot field width is now calculated primarily based on picture width/top relatively than container width/top. If person desires 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);