Mark Photo With Stylable Square Overlay - ImgBox

Mark Photo With Stylable Square Overlay - ImgBox
File Size: 12.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

How to use it:

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. More configuration options with default values.

$('#example').imgbox({
  // extra messages
  debug : false,

  // nice name, for debugging
  name : '',
  
  // Space separated classes
  markClass : '',

  // Addition features

  // edit - edit coordinate box
  command : '',
  
  // Call back to save box co-ordinates
  saveBox : callbackSaveBox,

  // Mainly internal use

  // Interval (ms) to update when image has not arrived yet
  retryInterval : 1000
});

Changelog:

2019-01-09

  • v1.2.0: added mark rules

2018-09-28

  • v1.1.1

2018-07-25

  • Add wrap_if_invalid, clean up

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