Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rockman84/imagelife
Jquery Plugin
https://github.com/rockman84/imagelife
image javascript jquery jquery-plugin
Last synced: about 1 month ago
JSON representation
Jquery Plugin
- Host: GitHub
- URL: https://github.com/rockman84/imagelife
- Owner: rockman84
- License: gpl-2.0
- Created: 2015-02-11T04:40:19.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-13T03:35:41.000Z (over 6 years ago)
- Last Synced: 2023-08-15T08:49:44.444Z (over 1 year ago)
- Topics: image, javascript, jquery, jquery-plugin
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# imageLife
ImageLife is Jquery Plugin purpose for interacting image with event mouse move.
## Live Demo
https://rockman84.github.io/imageLife/
## Usage
HTML:
```
```
Javascript:
```
// set image location
var config = {
center : 'center.jpg',
north : 'north.jpg',
northeast: 'norteast.jpg',
east : 'east.jpg',
southeast: 'southeast.jpg',
south : 'south.jpg',
southwest: 'southwest.jpg',
west : 'west.jpg',
northwest: 'northwest.jpg',
click : 'click.jpg'
};
// set object
var image = imageLife(config).target('#imagelife');
// get mousemove position
$(window).mousemove(function(e){
image.start(e);
});
```
## Option
- center: string - image location for center position
- north: string - image location for north position
- northeast: string - image location for north east position
- east: string - image location for east position
- southeast: string - image location for south east position
- south: string - image location for south position
- southwest: string - image location for south west position
- west: string - image location for west position
- northwest: string - image location for north west position
- click: string - image location for click position
- img_type: string - default file type
- adj_top: number - top adjustment for event position
- adj_right: number - right adjustment for event position
- adj_bottom: number - bottom adjustment for event position
- adj_left: number - left adjustment for event position
- debug_color: string | hex number - color for debug mode
## Method
### option()
```
image.option({
center: 'path/center.jpg',
north: 'path/center.jpg',
//....
});
```
- Param Object
### getDirection()
```
$(window).mousemove(function(e){
image.getDirection(e);
});
```
- Param Object (Require) MouseEvent
- Return String | Event
### getOffset()
```
image.getOffset();
```
- Return Object
### getDimension()
```
image.getDimension();
```
- Return Object
### debug()
```
$(window).mousemove(function(e){
image.debug();
});
```
## Event
Example:
```
var a = $('#imagelife').imageLife();
a.on('center',function(){
alert('Hi... Mouse was center');
});
```
Event List:
- change
- center
- north
- northeast
- east
- southeast
- south
- southwest
- west
- northwest
- click
# About the Author
Hi my name is Hansen Wong, i'm programming and designer based in Indonesia
I started this project to deepen my understanding of javascript