jQuery ImgBox: Image Marker Plugin Examples

Use x and y co-ordinates with width and height.

<img
 id="jack_me"
 class="img-responsive"
 data-x="525" data-y="50"
 data-w="300" data-h="350"
 src=".."/>

$('#jack_me').imgbox({markStyle:{'border': '4px solid red'}});

Apply style to all elements with a class of imgbox to share configuration.

<img
 class="img-responsive imgbox"
 data-x="1000" data-y="1500"
 data-w="375" data-h="150"
 src=".."/>

$('.imgbox').imgbox({markStyle:{'background-color':'white','opacity': '0.2', 'border': '4px dotted white'}});

Reusing style from imgbox. Wrap your image in anything like an anchor link.

<a href="README.md">
 <img
 class="img-responsive imgbox"
 data-x="15" data-y="110"
 data-w="70" data-h="80"
 src=".."/>
</a>

$('.imgbox').imgbox({markStyle:{'background-color':'white','opacity': '0.2', 'border': '4px dotted white'}});

Use x and y for the first set of co-ordinates and x2 and y2 for the second (instead of width and height).

<img
 id="party_jack"
 class="img-responsive"
 data-x="225" data-y="50"
 data-x2="620" data-y2="475"
 src=".."/>

$('#party_jack').imgbox({markStyle:{'border': '5px dashed cyan'}});

Add clickables like alerts to your img in the normal way.

<img
 id="fencing"
 class="img-responsive"
 data-x="390" data-y="280"
 data-w="220" data-h="220"
 onclick="alert('David is Ace!');"
 src=".."/>

$('#fencing').imgbox({markStyle:{'border': '10px solid yellow'}});