// Image default state
defaultState: 'straight',
 
// Speed of fade in ms
fadeSpeed: 200,
 
// Timeout before fade in ms
timeout: 300,
 
// Image elements
imageSelector: "img",
 
// Do we want hover to be different image?
hoverImg: false,
 
// Do we want to add direction classes to images?
addClasses: false,

// Add watchMe to div where your images are
$('#watchMe').watchMe();

// Add data attributes to every image
<img src="https://placehold.it/150x150&text=look straight" width="150" height="150"
  data-watchme-direction-straight="https://placehold.it/150x150&text=look straight"
  data-watchme-direction-straighthover="https://placehold.it/150x150&text=look straight hover"
  data-watchme-direction-up="https://placehold.it/150x150&text=look up"
  data-watchme-direction-upright="https://placehold.it/150x150&text=look upright"
  data-watchme-direction-right="https://placehold.it/150x150&text=look right"
  data-watchme-direction-downright="https://placehold.it/150x150&text=look downright"
  data-watchme-direction-down="https://placehold.it/150x150&text=look down"
  data-watchme-direction-downleft="https://placehold.it/150x150&text=look downleft"
  data-watchme-direction-left="https://placehold.it/150x150&text=look left"
  data-watchme-direction-upleft="https://placehold.it/150x150&text=look upleft"
/>