Mark Photo With Stylable Square Overlay - ImgBox

Mark Photo With Stylable Square Overlay - ImgBox

ImgBox is a jQuery image marker plugin that lets you draw a stylable square marker on your photo using HTML data attributes.

1. Import jQuery library along with the jQuery ImgBox plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.imgbox.js"></script>

2. Add a marker to your image using the following data attributes.

  • data-x: x coordinate
  • data-y: y coordinate
  • data-w: width
  • data-h: height
  • data-x2: second x coordinate
  • data-y2: second y coordinate
<img id="example"
     data-x="525" 
     data-y="50"
     data-w="300" 
     data-h="350"
     src="image.jpg">

3. Call the function to draw a default mark overlay on the image.

$('#example').imgbox();

4. Style the mark overlay using your own CSS.

$('#example').imgbox({
  markStyle:{
    'border': '3px solid red'
    // more styles here
  }
});

5. Specify the z-index property of the mark overlay.

$('#example').imgbox({
  markZIndex: 9999 // default: 1000
});

This awesome jQuery plugin is developed by davidnewcomb. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.07.2018
  • Source