ZooMove | jQuery Zoom Image
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
Get with npm
$ npm install zoomove --save
bower
$ bower install zoomove --save
yarn
$ yarn install zoomove
Or CDN (by cdnjs)
<!-- CSS --> <!-- JavaScript -->
If you prefer you can just download a ZIP file.
Setup
First, include the script located on the dist
folder.
<!-- ZooMove CSS minified --> <!-- jQuery CDN JS minified (must) --> <!-- ZooMove JS minified -->
Now need to prepare our(s) image(s) and show to the ZooMove.
<!-- Item image --> <!-- Starting the 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 Element -->
<!-- JavaScript --><!-- Thus it is applied universally -->
Examples
Images by lorempixel.
Image 1
Default
Image 2
Scale value
3
(300%
)
Image 3
Over
true
and Movefalse
Browser Support
42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 9+ ✔ | 12+ ✔ |
Contributing
Help improve these docs. Open an issue or submit a pull request.
- Navigate to the main page of the repository
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request =D
History
See Releases for detailed changelog.
License
MIT License © Emerson Thompson