addDot - The jQuery Plug-in for adding hot spots

Demos

Installation

Step 1 - Load the script

To use "addDot" plug-in you have to include the required javascript files in the <head> of your HTML document. You have to add jQuery library and "addDot" plug-in javascript file.


<script src="script/directory/path/jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script src="script/directory/path/jquery.addDot.min.js" type="text/javascript" language="javascript"></script>

Step 2 - Add your hot spots

The "addDot" plug-in is very easy to use. It provides various options. As shown in above demos, you can customize appearance of hot spot icons, label etc. in a way you want it. To do so you have to write HTML & CSS to apply custom look & feel. Below are points to consider to apply custom look to hot spots.

HTML

You have to place an image into <div> tag. And apply it unique id because you will add hot spots through id. To make your image into specific layouting, you can add <div>, <table> etc. around it and you can apply CSS class to achieve desired layouting.

As shown in below code, <div id="addDot_demo_auto"> is used to add hot spots. Outer div are for layouting purpose.


<div id="demo_box1" class="add-dot-demo-automotive">
    <div class="demo-content">
        <div class="automotive">
            <div id="addDot_demo_auto"><img src="img/demo_img1.jpg" alt="" /></div>
        </div>
    </div>
</div>
<div id="demo_box2" class="add-dot-demo-computer">
    <div class="demo-content">
        <div class="computer">
            <div id="addDot_demo_comp"><img src="img/demo_img2.jpg" alt="" /></div>
        </div>
    </div>
</div>

As shown in above code, image is wrapped into <div> and CSS class class="automotive" is applied to its wrapper. This is done to make image center to the container & to define image's boundries to restrict hot spot label to go beyound certain limit of width & height. If no width/height is defined for the container, it will take full width and hot spot label will expand till container width.

CSS

Default hot spot styles are defined into "addDot_styles.css" file. To make plug-in workable, you have to add that file into your <head> part.


<link href="css/addDot_styles.css" rel="stylesheet" type="text/css" />

As mentioned above, to define maximum allowed boundries you can wrap your image into <div> and can apply CSS class, in which you can specify CSS properties for the container.

If you are adding multiple images on one page and if you want to apply different look & feel to each image hot spot, you can define CSS classes into CSS files as below.

For styling outer containers define CSS classes into your website global CSS e.g. "global_style.css" file.
For styling hot spot icons, labels, fonts etc. define CSS classes into "addDot_styles.css" file.

Step 3 - Define your hot spots

You can define hot spots for multiple images as below.

<script type="text/javascript">

$(window).load(function() {

    $('#addDot_demo_auto').addDot({
        leftPos: 330,
        topPos: 180,
        label: 'Aerodynamic design. Passenger capsule with integrate battries',
        showOnLoad: true,
        aniType: 'slide',
        aniSpeed: 0.75,
        width:160
    });
    
    $('#addDot_demo_auto').addDot({
        leftPos: 145,
        topPos: 180,
        label: 'Organic LED external light',
        showOnLoad: false,
        aniType: 'slide',
        aniSpeed: 0.75
    });
    
    // You can add more hot spots for Automotive section so on...
    
    $('#addDot_demo_comp').addDot({
        leftPos: 315,
        topPos: 70,
        label: 'Inbuilt 2 MP HD  Web Cam',
        showOnLoad: false,
        aniType: 'none',
        eventType: 'hover'
    });
	
	
    $('#addDot_demo_comp').addDot({
        leftPos: 130,
        topPos: 320,
        label: '2nd Generation Intel® Core™ i5-2430M processor',
        showOnLoad: false,
        aniType: 'none',
        width:150,
        eventType: 'hover'
    });
    
    // You can add more hot spots for Computer section so on...
});

</script>

To get more idea, look at the source code of this page, all hot spots are defined into "custom.js" file.

Options

	Option	Description
	`leftPos`	Data Type: `integer` Default Value: `0` Possible Value: `200` Place hot spot on specified left position.
	`topPos`	Data Type: `integer` Default Value: `0` Possible Value: `200` Place hot spot on specified top position.
	`label`	Data Type: `string` Default Value: `'Label Text'` Possible Value: `'Hot spot label text'` Label text that will be display inside hot spot.
	`thumbImg`	Data Type: `string` Default Value: `NA` Possible Value: `'img/thumb_img.gif'` Add thumb image on left side of label. For displaying thumb image, you have to pass image URL. (e.g. img/path/imgname.ext)
	`showOnLoad`	Data Type: `boolean` Default Value: `false` Possible Value: `true or false` Set open/close hot spot label on page load. If `showOnLoad` is set to `true` hot spot will be open on page load.
	`showOnlyOne`	Data Type: `boolean` Default Value: `false` Possible Value: `true or false` Set only one hot spot label open on page at a time. If `showOnlyOne` is set to `true` at a time only one hot spot will be open previously opened hot spot will be close.
	`openDirectionH`	Data Type: `string` Default Value: `'ltr'` Possible Value: `'rtl' or 'ltr'` Set open/close horizontal direction of hot spot label. [rtl = right to left, ltr = left to right]
	`openDirectionV`	Data Type: `string` Default Value: `'down'` Possible Value: `'up' or 'down'` Set open/close vertical direction of hot spot label.
	`eventType`	Data Type: `string` Default Value: `'click'` Possible Value: `'click' or 'hover'` Set event type for hot spot open/close effect.
	`aniType`	Data Type: `string` Default Value: `'none'` Possible Value: `'slide' or 'none'` There are two options, by setting `slide` hot spot will open/close with slide effect. While `NA` will open/close hot spot without any effect. You can set the animation speed via `aniSpeed` option.
	`aniSpeed`	Data Type: `integer` Default Value: `1` Possible Value: `2 or 0.75` The duration of the animation. (duration is in seconds)
	`width`	Data Type: `integer` Default Value: `NA` Possible Value: `100` Set width of hot spot. (value is in pixel) If `width` is not specified, it will adjust width based on hot spot label text content.
	`height`	Data Type: `integer` Default Value: `NA` Possible Value: `100` Set height of hot spot. (value is in pixel) If `height` is not specified, it will adjust height based on hot spot label text content.
	`boundaryPadding`	Data Type: `integer` Default Value: `0` Possible Value: `10` Set right & bottom padding if width or height is not specified. By setting `contentPadding` as `10` if width is not specified, it will set width of hot spot 10px less than maximum allowed with (width of an image container). If height is not specified, it will set height of hot spot 10px less than maximum allowed height (height of an image container).
	`withinBoundary`	Data Type: `boolean` Default Value: `false` Possible Value: `true or false` If true, it will not allow hot spot position out of image area boundary. If user do so it will adjust to max allowed boundary – 150px.
	`btnLabel`	Data Type: `string` Default Value: `NA` Possible Value: `'1' or 'a' or 'I'` Set button label instead of button icon.

Override Default Values

You can easily change the default values for the hot spot. You can define your hot spot as below.


    $('imageContainerID').addDot({
        leftPos: 100,			// For left position
        topPos: 100,			// For top position
        label: 'Your hot spot label',	// String label
        thumbImg: 'img/thumb_img.png' 	// Thumb image path
        showOnLoad: true,		// This will make hot spot open/close on page load
        showOnlyOne: false,		// This will make only one hot spot open at a time
        openDirectionH: 'ltr',		// Set horizontal open direction for hot spot label
        openDirectionV: 'down',		// Set vertical open direction for hot spot label
        eventType: 'hover',		// Specify event type click/hover
        aniType: 'slide',		// Specifiy animation type for hot spot open/close
        aniSpeed: 0.75,			// Animation duration
        width:200,			// For width of hot spot label
        height: 50,			// For height of hot spot label
        boundaryPadding: 20,		// Set hot spot width/height - 20px if height/width not specified
        withinBoundary: true,		// Set hot spot within image boundary
        btnLabel: '1'			// Display button label instead of icon
    });

Other Plug-in(s) by me on Code Canyon

hoverOver – The jQuery Plug-in

for hover over content on image/text

"hoverOver" plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content. Plug-in can be used in...

To show content on hover over image/text
To show zoom-in/info icon on image
To show CTA buttons on hover over overlay
To show title text in over lay and slide up on hover over

Show Image in Placeholder/Target Box

for showing image in target box

Show in Place Holder plug-in is developed to show an image to place holder / target box. Plug-in can be used to showcase image portfolios, product images, software screenshots or any dam thing that you want to display to place holder / target box by clicking / hovering image thumbs or anchor links.

Plug-in provides facility to apply more than 20 animation effects to show image to place holder / target box. You can also add description text of an image.