|
1 | 1 | # ZOOM.JS
|
2 | 2 |
|
3 |
| -A simple jQuery plugin for beautiful, sleek image zooming; as seen on [Medium](https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20). |
| 3 | +A simple jQuery plugin for image zooming; as seen on [Medium](https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20). |
4 | 4 |
|
5 | 5 | ### Demo
|
6 |
| -You can see zoom.js in action here: https://fat.github.io/zoom.js |
| 6 | +https://fat.github.io/zoom.js |
7 | 7 |
|
8 |
| -### How To Use zoom.js |
| 8 | +### How |
9 | 9 |
|
10 | 10 | 1. Link the zoom.js and zoom.css files to your site or application.
|
11 | 11 |
|
12 | 12 | `<link href="css/zoom.css" rel="stylesheet">`
|
13 | 13 |
|
14 | 14 | `<script src="js/zoom.js">`
|
15 |
| -2. zoom.js is dependent on the teeny tiny [transition.js file](https://raw.github.com/twbs/bootstrap/master/js/transition.js) from Bootstrap, so make sure to include that as well. |
| 15 | + |
| 16 | +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. |
16 | 17 |
|
17 | 18 | `<script src="js/transition.js">`
|
18 | 19 |
|
19 |
| -3. To use zoom.js, simply add a `data-action="zoom"` attribute to an image element you would like to utilise the plugin. For example: |
| 20 | +3. Add a `data-action="zoom"` attribute to the images you want to make zoomable. For example: |
20 | 21 |
|
21 | 22 | `<img src="img/blog_post_featured.png" data-action="zoom">`
|
22 | 23 |
|
23 | 24 |
|
24 |
| -### Awesome Features |
| 25 | +### Why |
| 26 | + |
| 27 | +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. |
| 28 | + |
| 29 | +Also, now if you hold your meta key (`⌘`), it will open in a new tab. wow. |
| 30 | + |
25 | 31 |
|
26 |
| -zoom.js will automatically close when the user clicks out of it, scrolls away, or presses the escape key. |
| 32 | +### Where |
27 | 33 |
|
28 |
| -Super simple to use. Looks pretty. What more do you want?! |
| 34 | +zoom.js should (in theory) work in all relevant browsers. If not, create an issue! Thanks! |
29 | 35 |
|
30 | 36 |
|
31 |
| -### Browser Support |
| 37 | +### Who |
32 | 38 |
|
33 |
| -zoom.js should (in theory) work in all relevant browsers. If not, create an issue! |
| 39 | +Written by @fat, made better by you. |
0 commit comments