Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kingdido999/zooming
🔍 Image zoom that makes sense.
https://github.com/kingdido999/zooming
image image-zoom javascript no-dependencies zoom
Last synced: 28 days ago
JSON representation
🔍 Image zoom that makes sense.
- Host: GitHub
- URL: https://github.com/kingdido999/zooming
- Owner: kingdido999
- License: mit
- Created: 2016-10-27T04:13:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-17T17:59:39.000Z (7 months ago)
- Last Synced: 2024-05-17T12:48:18.556Z (6 months ago)
- Topics: image, image-zoom, javascript, no-dependencies, zoom
- Language: JavaScript
- Homepage: https://kingdido999.github.io/zooming
- Size: 7.17 MB
- Stars: 1,605
- Watchers: 33
- Forks: 118
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zooming [](https://www.npmjs.com/package/zooming) [](https://bundlephobia.com/result?p=zooming)
Image zoom that makes sense.
- Pure JavaScript & built with mobile in mind.
- Smooth animations with intuitive gestures.
- Zoom into a hi-res image if supplied.
- Easy to integrate & customizable.
## Get Started
Try [Demo](https://kingdido999.github.io/zooming/) or play with [codepen](https://codepen.io/kingdido999/pen/rpYrKV).
Please see [Documentation](https://kingdido999.github.io/zooming/docs) for detailed guide.
## Showcase
These projects are using Zooming. Pull requests are welcome!
- [beta](https://github.com/sunya9/beta): pnut.io web client.
- [bluedoc](https://github.com/thebluedoc/bluedoc): an open-source document management tool for enterprise self host.
- [Chalk](https://github.com/nielsenramon/chalk): a high quality, completely customizable, performant and 100% free Jekyll blog theme.
- [Drupal Zooming](https://www.drupal.org/project/zooming): integrate Zooming to Drupal.
- [imagediff](https://github.com/Showmax/imagediff): tool for automated UI testing and catching visual regressions.
- [OctoberCMS Zooming Images plugin](https://github.com/alex-lit/OctoberCMS-Zooming-Images-Plugin): open source plugin for October CMS.
- [vuepress-plugin-zooming](https://github.com/vuepress/vuepress-plugin-zooming): make images zoomable in VuePress.
- [docusaurus-plugin-zooming](https://github.com/inovector/docusaurus-plugin-zooming): make images zoomable in Docusaurus.
## Caveats / Limitations
- Avoid working with fixed position images [#34](https://github.com/kingdido999/zooming/issues/34).
- Image won't be visible after zoom-in if any parent element has style `overflow: hidden` [#22](https://github.com/kingdido999/zooming/issues/22).
## Contributing
Fork it. Under project folder:
```bash
yarn
yarn start
```
Open up `index.html` in browser.
Make your changes and submit a pull request!
## Test
`yarn test`
## Credit
Inspired by [zoom.js](https://github.com/fat/zoom.js) and [zoomerang](https://github.com/yyx990803/zoomerang). First demo image from [Journey](http://thatgamecompany.com/games/journey/). Second demo image [journey](http://www.pixiv.net/member_illust.php?mode=medium&illust_id=36017129) by [飴村](http://www.pixiv.net/member.php?id=47488).