forked from fat/zoom.js
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
improve docs a bit, because people were not down
- Loading branch information
fat
committed
May 7, 2015
1 parent
98b9434
commit e225fb9
Showing
1 changed file
with
16 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,39 @@ | ||
# ZOOM.JS | ||
|
||
A simple jQuery plugin for beautiful, sleek image zooming; as seen on [Medium](https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20). | ||
A simple jQuery plugin for image zooming; as seen on [Medium](https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20). | ||
|
||
### Demo | ||
You can see zoom.js in action here: https://fat.github.io/zoom.js | ||
https://fat.github.io/zoom.js | ||
|
||
### How To Use zoom.js | ||
### How | ||
|
||
1. Link the zoom.js and zoom.css files to your site or application. | ||
|
||
`<link href="css/zoom.css" rel="stylesheet">` | ||
|
||
`<script src="js/zoom.js">` | ||
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. | ||
|
||
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. | ||
|
||
`<script src="js/transition.js">` | ||
|
||
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: | ||
3. Add a `data-action="zoom"` attribute to the images you want to make zoomable. For example: | ||
|
||
`<img src="img/blog_post_featured.png" data-action="zoom">` | ||
|
||
|
||
### Awesome Features | ||
### 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. | ||
|
||
Also, now if you hold your meta key (`⌘`), it will open in a new tab. wow. | ||
|
||
|
||
zoom.js will automatically close when the user clicks out of it, scrolls away, or presses the escape key. | ||
### Where | ||
|
||
Super simple to use. Looks pretty. What more do you want?! | ||
zoom.js should (in theory) work in all relevant browsers. If not, create an issue! Thanks! | ||
|
||
|
||
### Browser Support | ||
### Who | ||
|
||
zoom.js should (in theory) work in all relevant browsers. If not, create an issue! | ||
Written by @fat, made better by you. |