Skip to content

Commit 98b9434

Browse files
joe-callonfat
authored andcommitted
Updated README
Updated README AGAIN! WOOPS! Made it less shouty Words are hard Added an extra feature Added scrolling - jdreesen
1 parent 9baa398 commit 98b9434

File tree

1 file changed

+24
-10
lines changed

1 file changed

+24
-10
lines changed

README.md

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
1-
# ZOOM
1+
# ZOOM.JS
22

3-
A bit about our Image Zoom plugin: https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20
3+
A simple jQuery plugin for beautiful, sleek image zooming; as seen on [Medium](https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20).
44

5-
Demo: https://fat.github.io/zoom.js
5+
### Demo
6+
You can see zoom.js in action here: https://fat.github.io/zoom.js
67

7-
### HOW TO USE IT
8+
### How To Use zoom.js
89

9-
+ Include `zoom.js` and `zoom.css` in your application. (note: zoom.js depends on [bootstrap's transition.js](https://raw.github.com/twbs/bootstrap/master/js/transition.js)) - don't worry, it's tiny.
10-
+ Add a `data-action="zoom"` attribute to the image tags you want to zoom.
10+
1. Link the zoom.js and zoom.css files to your site or application.
1111

12-
### WHY TO USE IT
12+
`<link href="css/zoom.css" rel="stylesheet">`
1313

14-
It's the best way to zoom an image. It transition/zooms in really cleanly, and then when you're done, scrolls away, [esc] keys away, clicks away… clean af.
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.
1516

17+
`<script src="js/transition.js">`
1618

17-
### WHERE TO USE IT
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:
1820

19-
This plugin ~probably~ works in all relevant browsers. If not, let me know.
21+
`<img src="img/blog_post_featured.png" data-action="zoom">`
22+
23+
24+
### Awesome Features
25+
26+
zoom.js will automatically close when the user clicks out of it, scrolls away, or presses the escape key.
27+
28+
Super simple to use. Looks pretty. What more do you want?!
29+
30+
31+
### Browser Support
32+
33+
zoom.js should (in theory) work in all relevant browsers. If not, create an issue!

0 commit comments

Comments
 (0)