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: about 16 hours 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 (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-04-27T13:01:44.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T12:33:51.109Z (10 months 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

[![Website](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](http://thompsonemerson.github.io/zoomove)

[![licence mit](https://img.shields.io/badge/licence-MIT-blue.svg)](http://thompsonemerson.mit-license.org/)

[![Build Status](https://travis-ci.org/thompsonemerson/zoomove.svg?branch=master)](https://travis-ci.org/thompsonemerson/zoomove)

[![GitHub version](https://badge.fury.io/gh/thompsonemerson%2Fzoomove.svg)](https://badge.fury.io/gh/thompsonemerson%2Fzoomove)

[![Bower version](https://badge.fury.io/bo/zoomove.svg)](https://badge.fury.io/bo/zoomove)

[![npm version](https://badge.fury.io/js/zoomove.svg)](http://badge.fury.io/js/zoomove)

[![CDNJS version](https://img.shields.io/cdnjs/v/zoomove.svg)](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).

![GIFs <3](https://media.giphy.com/media/3o6ozmHwJIzCaBadgI/giphy.gif)

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