mango-js v1.0.2
Mango.js
A small medium like javascript library to zoom your images.
Install
# Using npm
npm install mango-js
# Using yarn
yarn add mango-jsNow include mango and you should be good to go.
// es6
import mango from 'mango'
// commonjs
const mango = require('mango');Alternatively you can include a minified version of mango (or the source code, up to you) via direct file or using our CDN link.
<body>
<script src="https://unpkg.com/mango-js"></script>
</body>Usage
Add data-mango to your images as it follows below.
<img data-mango src="path/to/image/image.jpg" alt="">...</img>Add mango css to your document.
<link rel="stylesheet" href="/path/to/file/mango.css">Call mango anywhere in your code:
// Call me
mango();Additionally add a high-res image as a data-src attribute, like the example below:
<img data-mango src="" data-src="path/to/image/high.jpg" alt="">...</img>Configuring
Pass options to mango like the example below:
// Custom options
mango({
selector: '[data-mango]', // data-mango
background: 'white', // background-color
margin: 50 // 50px
});Supported parameters
selectortypestringdefault[data-mango].backgroundtypestringdefaultwhite.margintypeintegerdefault50.interruptKeystypearraydefault[27, 37, 39].
Running Tasks
You can run tasks with yarn or npm using the following commands:
# Build task
$ yarn build
# etc.
$ ...Roadmap
Todo List
- Make a better example page.
Add data-src image option.- Make selected images only support an image tag.
- Refactor zoom().
- Refactor event listeners.
- Refactor handlers
- Fix isAnimating.
- Refactor animate().
- Reduce to 150 lines or less (without comments).
- Refactor to arrow functions.
- Write tests.
Legend: Checked boxes mean partial completion, checked and crossed items mean they're fully working.
Contributing
If you feel like smoothie is missed something please do send a message or, alternatively make a pull request or even open an issue using an appropriate label and we will go from there.
License
Code released under the MIT license.