https://github.com/fat/zoom.js

Medium's Image Zoom for jQuery
https://github.com/fat/zoom.js

Last synced: 26 days ago
JSON representation

Medium's Image Zoom for jQuery

• Host: GitHub
• URL: https://github.com/fat/zoom.js
• Owner: fat
• License: mit
• Created: 2013-10-24T05:45:32.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2023-02-17T23:27:23.000Z (over 1 year ago)
• Last Synced: 2024-04-14T09:07:43.616Z (7 months ago)
• Language: JavaScript
• Homepage: https://fat.github.io/zoom.js
• Size: 675 KB
• Stars: 4,046
• Watchers: 83
• Forks: 332
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE.txt

Awesome Lists containing this project

• awesome-jquery - zoom.js - Medium's Image Zoom for jQuery (Images / Data Table)

README

        
# ZOOM.JS

A simple jQuery plugin for image zooming; as seen on [Medium](https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20).

### Demo

https://fat.github.io/zoom.js

### How

1. Link the zoom.js and zoom.css files to your site or application.

  ```html

  

  

  ```

2. zoom.js is dependent on [transition.js file](https://raw.github.com/twbs/bootstrap/master/js/transition.js) from Bootstrap, so make sure to include that as well.

  ```html

  

  ```

3. Add a `data-action="zoom"` attribute to the images you want to make zoomable. For example:

  ```html

  

  ```

### Why

It's the best way to zoom an image. It transitions/zooms in really smoothly, and then when you're done, scrolls away, [esc] keys away, clicks away… clean af.

If you hold your meta key (`⌘` on mac) or (`ctrl` on windows), it will open in a new tab. wow.

ps. use a `data-original` attr to link to a separate image. Just for meta-clicking tho.

### Where

zoom.js should (in theory) work in all relevant browsers (ie9+). If not, create an issue! Thanks!

### Who

Written by @fat, made better by you.