https://github.com/thompsonemerson/zoomove
:mag: :fireworks: Enlarges the image with the mouse hover and move
https://github.com/thompsonemerson/zoomove
jquery move plugin zoom
Last synced: 2 months ago
JSON representation
:mag: :fireworks: Enlarges the image with the mouse hover and move
- Host: GitHub
- URL: https://github.com/thompsonemerson/zoomove
- Owner: thompsonemerson
- License: mit
- Created: 2016-01-02T14:44:14.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-27T13:01:44.000Z (about 2 years ago)
- Last Synced: 2024-04-14T12:33:51.109Z (about 1 year ago)
- Topics: jquery, move, plugin, zoom
- Language: JavaScript
- Homepage: http://thompsonemerson.github.io/zoomove
- Size: 3 MB
- Stars: 341
- Watchers: 16
- Forks: 52
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ZooMove | jQuery Zoom Image
[](http://thompsonemerson.github.io/zoomove)
[](http://thompsonemerson.mit-license.org/)
[](https://travis-ci.org/thompsonemerson/zoomove)
[](https://badge.fury.io/gh/thompsonemerson%2Fzoomove)
[](https://badge.fury.io/bo/zoomove)
[](http://badge.fury.io/js/zoomove)
[](https://cdnjs.com/libraries/zoomove)
> It's a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.
## Table of Contents
- [Install](#install)
- [Setup](#setup)
- [How to Use](#how-to-use)
- [Examples](#examples)
- [Browser Support](#browser-support)
- [Contributing](#contributing)
- [History](#history)
- [License](#license)
## Install
Get with npm
```bash
$ npm install zoomove --save
```
bower
```bash
$ bower install zoomove --save
```
yarn
```bash
$ yarn install zoomove
```
Or CDN (by [cdnjs](https://cdnjs.com/))
```html
```
If you prefer you can just [download a ZIP](https://github.com/thompsonemerson/zoomove/archive/master.zip) file.
## Setup
First, include the script located on the `dist` folder.
```html
```
Now need to prepare our(s) image(s) and show to the ZooMove.
```html
$('.zoo-item').ZooMove();
```
Ready, prepared environment, now is hour of our plugin take action and prepare all remaining process.
Now says it is not easy?! ;)
## How to Use
| Property | Default | Description |
| :------------ |:---------------:| :-----|
| data-zoo-image | - | The url of the photo to be displayed. |
| data-zoo-scale | 1.5 (150%) | Sets the zoom size that should be applied to the image. |
| data-zoo-move | true | Choose whether the image should move with the mouse move. |
| data-zoo-over | false | With 'over' it is possible to define whether the image may be above. |
| data-zoo-cursor | false | Define the cursor pointer or default. |
| data-zoo-autosize | true | Sets the size of the automatic image. |
```html
```
```html
$('.zoo-item').ZooMove({
image: '[value]',
scale: '[value]',
move: '[value]',
over: '[value]',
cursor: '[value]',
autosize: '[value]'
});
```
## Examples
> Images by [lorempixel](http://lorempixel.com).
### Image 1
> Default
```html
```
### Image 2
> Scale value `3` (`300%`)
```html
```
### Image 3
> Over `true` and Move `false`
```html
```
## Browser Support
| 
| 
| 
| 
| 
| 
|
|:---:|:---:|:---:|:---:|:---:|:---:|
| 42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 9+ ✔ | 12+ ✔ |
## Contributing
Help improve these docs. Open an [issue](https://github.com/thompsonemerson/zoomove/issues/new) or submit a pull request.
1. Navigate to the main page of the repository
1. [Fork it!](https://github.com/thompsonemerson/zoomove#fork-destination-box)
1. Create your feature branch: `git checkout -b my-new-feature`
1. Commit your changes: `git commit -m 'Add some feature'`
1. Push to the branch: `git push origin my-new-feature`
1. Submit a pull request =D
## History
See [Releases](https://github.com/thompsonemerson/zoomove/releases) for detailed changelog.
## License
[MIT License](http://thompsonemerson.mit-license.org/) © Emerson Thompson