Skip to content
Slctr is a simple jQuery plugin created for selecting an area of graphic document.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Slctr is a simple jQuery plugin created for selecting an area of graphic document and get coordinates of this selection. The view of selection is displayed as a simple transparent rectangle. Simple style is built on SASS.


<div id="slctrBox">
   <img src="img/page11_000.jpg">
   <img src="img/page11_001.jpg">
   <img src="img/page11_002.jpg">

All you have to do is add items to the #slctrBox.



To fire up the Slctr call plugin for body.

slctrBox: '#slctrBox',
insdElmnts: 'img',
globalWidth: 'undefined',
cursorDistance: 10

This is default settings which of course you can change.

  • slctrBox - id of selected container,
  • insdElmnts - type of elements contained in,
  • globalWidth - if it's stay as 'undefined' plugin will automaticly calculate width from inside elements and assign it to Sltr container, if value will be defined container width will be the same as this value
  • coursorDistance - distance of the cursor from the selected area


The selected coordinates is displaying as a data values of a hidden input #selectCoords. To get this values use $selectCoordsDt object. Also use console.dir($selectCoordsDt); to see them at the browser console.

In addition, the selection values can be read by using the callback function.

   callback: (e) => {


Behind the appearance of a selected area correspond to the variables generated by SCSS file. Change it to change Slctr visual presentation.

$crctBorderColor: #b5d7bc;


This is how Slctr looks like. Slctr Preview


Please note that is 0.4 version. Feel free to use the plugin anywhere and any way you want. Let me know if you find a bug or if it is worth something to change.

MIT License:

You can’t perform that action at this time.