https://github.com/renekorss/jquery-watchme

A jQuery plugin to manipulate image sources depending on hovered image position
https://github.com/renekorss/jquery-watchme

image-manipulation images javascript jquery jquery-plugin jquery-plugins

Last synced: about 2 months ago
JSON representation

A jQuery plugin to manipulate image sources depending on hovered image position

• Host: GitHub
• URL: https://github.com/renekorss/jquery-watchme
• Owner: renekorss
• License: mit
• Created: 2014-09-02T13:18:40.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2019-01-28T06:52:22.000Z (over 7 years ago)
• Last Synced: 2026-02-12T23:43:35.439Z (4 months ago)
• Topics: image-manipulation, images, javascript, jquery, jquery-plugin, jquery-plugins
• Language: HTML
• Size: 34.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/jquery-watchme.svg)](https://badge.fury.io/js/jquery-watchme)

[![npm](https://img.shields.io/npm/dt/jquery-watchme.svg)](https://www.npmjs.com/package/jquery-watchme)

[![Known Vulnerabilities](https://snyk.io/test/github/renekorss/jquery-watchme/badge.svg?targetFile=package.json)](https://snyk.io/test/github/renekorss/jquery-watchme?targetFile=package.json)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

# jQuery watchMe

> A jQuery plugin to manipulate image sources depending on hovered image position

## Install

`npm install jquery-watchme`

## Demo

See demo on [jsFiddle](http://jsfiddle.net/ReneKorss/2b2y3yez/).

## Options

```JavaScript

// 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

```JavaScript

// Add watchMe to div where your images are

$('#watchMe').watchMe();

```

```HTML

// Add data attributes to every image



```

## Directions (10)

* Straight `data-watchme-direction-[defaultState]`

* Straight hover `data-watchme-direction-[defaultState]hover` (Requires option `hoverImg` 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](LICENSE)