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 optionhoverImg
to 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