jQuery watchMe
A jQuery plugin to manipulate image sources depending on hovered image position
Install
npm install jquery-watchme
Demo
See demo on jsFiddle.
Options
// 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,Usage
// 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" />Directions (10)
- Straight
data-watchme-direction-[defaultState] - Straight hover
data-watchme-direction-[defaultState]hover(Requires optionhoverImgto be true) - Up
data-watchme-direction-up - Down
data-watchme-direction-down - Left
data-watchme-direction-left - Right
data-watchme-direction-right - Down left
data-watchme-direction-downleft - Down right
data-watchme-direction-downright - Up left
data-watchme-direction-upleft - Up right
data-watchme-direction-upright
License
Licensed under MIT
